安装步骤
1.安装依赖
必须安装的依赖有：Node、Python2、JDK 和 Android Studio（ Node 的版本应大于等于 12，Python 的版本必须为 2.x（不支持 3.x），而 JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本））
2.cmd安装
nrm 管理npm下载源：npm install nrm -g和nrm ues taobao
react-native-cli native脚手架：npm install react-native-cli-g
3.配置环境变量
ANDROID_HOME---安卓sdk所在的目录
platform-tools 平台工具：
C:\Users\Administrator\AppData\Local\Android\Sdk\platform-tools;
Java jdk/bin 目录：
C:\Program Files\Java\jdk1.8.0_202\bin
4.初始化项目
npx react-native init myapp
添加安卓依赖包的源地址（阿里）：android/build.gradle
5.连接模拟器（mumu）
先打开mumu模拟器，然后cmd输入adb connect 127.0.0.1:7555
6.运行项目
npx react-native run-android
7.在VSCode里打开该项目
修改APP.js，制作自己想要的页面效果
<meta charset="utf-8">
三.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>
);
}
}
