React Navite环境搭建

俗话说“工欲善其事，必先利其器。”所以，我们第一步就是搭建React Native开发坏境。

一、安装Node.js、npm、yarn

1.1 React native需要借助node.js来创建和运行JavaScript代码。

    Node.js是运行在服务端的JavaScript，基于Chrome JavaScript运行时建立的一个平台，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

1.2 node.js中的npm,npm（即 node package manager ）是Node的包管理工具，能解决NodeJS代码部署上的很多问题。

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

在终端，执行这三个命令，分别安装node、npm、yarn

brew install node
brew install npm
npm install -g yarn

 查看node、npm、yarn的版本信息。

 

 装brew install node

二、原生开发工具及坏境

2.1.Xcode ,最好通过App Store下载，不然可能发生非法代码植入的可能。

2.2. cocoaPods安装，管理第三方依赖库的工具。

2.3 Homebrem安装，MacOS系统坏境下的软件包管理工具，拥有安装，卸载，更新，查看和搜索软件包的功能。

三、安装React Native及辅助工具

安装React Native

npm install -g react-native-cli

 安装 Watchman ,它是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）。

brew install watchman

 四、React Native 开发工具

4.1 Visual Studio Code（VS Code）
4.2 WebStorm
4.3 Nuclide
4.4 Flipper

五、初始化项目

 命令行初始化

react-native init chapter2

注意：直接执行命令，可能会出现 TypeError: cli.init is not a function 这个错误，里面仅有node_modules，没有Android、IOS等文件。

解决：指定版本：npx react-native init chapter2 --version 0.68.2

六、运行项目

在终端进入chapter2，在用pod install安装第三方依赖。打开.xcworkspace,和原生运行项目一样的。

也可以直接在终端运行：yarn react-native run-ios

注意： 0.60 版本之后的主项目文件是.xcworkspace，不是.xcodeproj。

七、调试项目

7.1 模拟器：Command + D 打开调试功能；真机：晃动设备即可打开调试选项。

八、编辑项目

编辑器打开App.js并随便改上几行，保存就能看到手机上的修改了。

 

 

react-native init AwesomeProject