1、安装

1、最好不要使用cnpm
2、npx nrm use taobaonrm是切换工具，可以切换镜像源npx nrm use npm
3、安装android studio 省略

2、创建项目

1、安装npm install -g react-native-cli
2、创建新项目：npx react-native init myproject,其中有可选参数，--version x.xx.x

3、使用android真机（待实践）

1、开启usb调试，默认情况下设备只能从应用市场安装应用，开启us调试可以自由安装开发版本的app
2、通过usb数据线链接设备，检查可否正确的链接ADB（安卓调试桥梁）adb devices,每次最好链接一个设备
3、安装并启动应用npx react-native run-android
4、从设备上访问开发服务器，

4、编译运行rn应用

1、cd到项目目录中，运行yarn android 或者 yarn react-native run-android,这个命令会对项目的原生部分进行编译，同时在另外一个命令行中启动metro服务对js代码实时打包（类似webpack）

5、集成到现有的原生应用

1、创建一个空目录用于存放react native项目，在创建一个/android子目录，将项目拷贝到这个目录
2、安装js依赖包，在项目的根目录下创建一个packagejson文件，写入

{
  "name": "MyReactNativeApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "yarn react-native start"//是用于启动metro的命令
  }
}

3、安装react和react native模块，在终端命令行里面进入项目目录yarn add react-native默认安装最新版本的rn，还需要安装指定版本的react yarn add react@16.2.0
4、所有的依赖都会安装到node-moudles目录，这个目录原则上不移动，不复制，不上传，随用随装。记录到gitignore
5、把rn添加到应用中，1、配置maven，在app的build.gradle文件添加，rn和jsc引擎依赖

dependencies {
    implementation "com.android.support:appcompat-v7:27.1.1"
    ...
    implementation "com.facebook.react:react-native:+" // From node_modules
    implementation "org.webkit:android-jsc:+"
}

6、快速刷新

1、在修改组件的时候会及时刷新
2、在rn开发者菜单选择enable fast refresh

6.1、原理

1、如果只导出组件的模块，刷新会修改这个模块，然后重新渲染这个组件
2、如果不导出组件，刷新的时候会重新编译这个模块，引入这个模块的其他文件也会更新
3、如果react渲染树之外的引入了一个文件

6.2、错误还原

1、快速刷新时出现了错误，则错误模块会被阻止运行，修复错误后重新保存文件，不用重载app

7、调试

7.1、开启调试快捷键

1、rn在ios模拟器上快捷键，确保模拟器的hardware-keyboard-connect hardware keyboard 开启

7.2、打开开发菜单

1、摇晃或者hardware-shake gesture

8.1、样式

1、使用stylesheet.create()函数

1、函数的参数是一个对象，对象的属性还是对象，

const styles = StyleSheet.create({
  container: {
    marginTop: 50,
  },
  bigBlue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

2、style属性的值也是一个对象，也可以是一个数组，数组里放置多个对象

 <Text style={[styles.bigBlue, styles.red]}>bigBlue, then red</Text>
<Text style={[styles.red, styles.bigBlue]}>red, then bigBlue</Text>

8.2、高度与宽度

1、直接制定height和width，属性值不加引号，也不加单位
2、使用弹性宽高，fledx:1指定元素扩张撑满空间，如果不同元素设置不同的flex值，就会按照比例收缩
3、前提是夫容器的尺寸不为0
4、百分比宽高：记得加引号，需要夫元素尺寸固定

8.3、使用flexbox布局

1、使用flexDirections justifyContent alignItems
2、flexDirection: row,column,row-reverse,column-reverse
3、flex-wrap:nowrap,wrap,wrap-reverse
4、justify-content: flex-start flex-end center space-between space-around
5、align-items:flex-start flex-end center stretch
6、flex-direction的默认值是column

8.4、静态图片资源

1、<Image source={require("./myicon.png")}/>,使用require引入图片模块
2、require里面的