react-native自学笔记

react-native自学笔记---Mac版

一、开发环境搭建

详情请参考：https://reactnative.cn/docs/getting-started.html

1、安装nodeJs,通过npm安装react-native命令行工具 npm install -g react-native

2、安装xcode, android studio,android studio下载链接：https://developer.android.google.cn/studio/

3、初始化第一个react-native项目 react-native init FirstApp

4、配置淘宝镜像，加快项目初始化项目

5、运行iOS项目 ,通过命令行运行,输入指令react-native run-ios，或在Xcode上打开ios/FirstApp.xcodeproj，点击run按钮，即可将项目运行到iOS模拟器上

6、运行android项目，首先确保电脑已运行一个android模拟器，启动android模拟器，通过命令行启动,输入指令emulator -avd {your device}或通过android studio启动

7、android模拟器运行成功输入指令react-native run-android, 或在android studio中打开根目录下的android文件夹，点击运行按钮，第一次编译时间较长，请耐心等待

 

二、开发工具选择

1、推荐webstorm,无需手动下载任何插件，界面和操作与android studio相仿

2、Nuclide+ Watchman （Mac）需要插件配合

3、Sublime，界面简单，上手快，需要插件支持

 

三、构建官方example项目

1、克隆项目,依次执行如下命令：

   react-native init MyApp

   cd MyApp

  (0.60以上版本

   cd ios

   pod install

   cd ..)

   react-native run-ios

 

四、学习指南：https://github.com/reactnativecn/react-native-guide

 

五、遇到的问题

1、要用react-navigation3的小伙伴，不要用cnpm和yarn来安装包，会报错unable to resolve module 'react-navigation'

2、node更新到10以上后，npm install 发现报错了，不要慌，查看你的npm版本是不是在v5以上，尝试npm install npm@4 -g做个降级(mac最好带上sudo)

3、进入iOS目录执行pod install 报错，尝试在命令行执行gem install concurrent-ruby or gem update concurrent-ruby

4、运行项目 react-native run-ios，报错'UIKit/UIUserActivity.h' file not found react-native，更新xcode到最新版。。。

5、执行react-native run-ios 报错'UIKit/UIUserActivity.h' file not found，用Xcode打开项目运行代码就好了

5、null is not an object (evaluating '_RNGestureHandlerModule.default.Direction