了解React Naive

一.安装

1.安装依赖

必须安装的依赖有：Node、Python2、JDK 和 Android Studio。

虽然你可以使用任何编辑器来开发应用（编写 js 代码），但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环境。

使用nrm工具切换淘宝源

npx nrm use taobao

如果之后需要切换回官方源可使用

npx nrm use npm

Yarn

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。

npm install -g yarn

安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。

2，Android 开发环境

1.首先下载和安装 Android Studio，

Android SDK
Android SDK Platform
Performance (Intel ® HAXM) (AMD 处理器看这里)
Android Virtual Device

安装 Android SDK
配置 ANDROID_HOME 环境变量
把一些工具目录添加到环境变量 Path 中

3.创建新项目

npx react-native init myapp
编译并运行 React Native 应用
确保你先运行了模拟器或者连接了真机，然后在你的项目目录中运行yarn android或者yarn react-native run-android：

cd AwesomeProject
yarn android

或者

yarn react-native run-android

二.核心组件与原生组件

1.React Native具有许多核心组件，从表单控件到活动指示器，应有尽有。您可以在API部分找到所有记录的文档。您将主要使用以下核心组件：

zujian.png

import React from 'react';
import { View, Text, Image, ScrollView, TextInput } from 'react-native';
export default function App() {
  return (
  <ScrollView>
  <Text>Some text</Text>
  <View>
    <Text>Some more text</Text>
    <Image source="https://facebook.github.ioassets/p_cat2.png" style={{width: 200, height: 200}}/>
  </View>
  <TextInput
    style={{
      height: 40,
      borderColor: 'gray',
      borderWidth: 1
    }}
    defaultValue="You can type in me"
  />
</ScrollView>
  );
}

三.react基础

1.React背后的核心概念：

组件
JSX
道具
声明

（1）功能组件

import React from 'react';
import { Text } from 'react-native';
export default function Cat() {
  return (
    <Text>Hello, I am your cat!</Text>
  );
}

操作方法如下：要定义Cat组件，请首先使用JavaScript import导入React和React Native的Text核心组件：

import React from 'react';
import {Text} from 'react-native';

组件作为一个函数启动：

function Cat() {}

函数组件返回的任何内容均呈现为React元素。Cat将呈现一个<Text>元素：

function Cat() {
  return <Text>Hello, I am your cat!</Text>;
}

可以使用JavaScript导出功能组件，export default以在整个应用程序中使用，如下所示：

export default function Cat() {
  return <Text>Hello, I am your cat!</Text>;
}

这是导出组件的多种方法之一。这种导出可以与Snack Player一起使用

四.Props属性

1.以常见的基础组件Image为例

在创建一个图片时，可以传入一个名为source的 prop 来指定要显示的图片的地址，以及使用名为style的 prop 来控制其尺寸。

import React, { Component } from 'react';
import { Image } from 'react-native';

export default class Bananas extends Component {
  render() {
    let pic = {
      uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
  <Image source={pic} style={{width: 193, height: 110}} />
);
}
}

2.自定义的组件也可以使用props。

通过在不同的场景使用不同的属性定制，可以尽量提高自定义组件的复用范畴。只需在render函数中引用this.props，然后按需处理即可。

import React, { Component } from 'react';
import { Text, View } from 'react-native';

class Greeting extends Component {
    render() {
      return (
      <View style={{alignItems: 'center', marginTop: 50}}>
      <Text>Hello {this.props.name}!</Text>
  </View>
);
}
}

export default class LotsOfGreetings extends Component {
render() {
return (
  <View style={{alignItems: 'center'}}>
    <Greeting name='Rexxar' />
    <Greeting name='Jaina' />
    <Greeting name='Valeera' />
  </View>
);
}
}

最后编辑于：2020.10.21 16:29:46