俗話說“工欲善其事，必先利其器。”所以，我們第一步就是搭建React Native開發(fā)壞境。

一、安裝Node.js、npm、yarn

1.1 React native需要借助node.js來創(chuàng)建和運(yùn)行JavaScript代碼。

??? Node.js是運(yùn)行在服務(wù)端的JavaScript，基于Chrome?JavaScript運(yùn)行時建立的一個平臺，基于Google的V8引擎，V8引擎執(zhí)行Javascript的速度非常快，性能非常好。

1.2 node.js中的npm,npm（即?node package manager?）是Node的包管理工具，能解決NodeJS代碼部署上的很多問題。

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

在終端，執(zhí)行這三個命令，分別安裝node、npm、yarn

brew install node
brew install npm
npm install -g yarn

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

?

?裝brew install node

二、原生開發(fā)工具及壞境

2.1.Xcode ,最好通過App Store下載，不然可能發(fā)生非法代碼植入的可能。

2.2. cocoaPods安裝，管理第三方依賴庫的工具。

2.3 Homebrem安裝，MacOS系統(tǒng)壞境下的軟件包管理工具，擁有安裝，卸載，更新，查看和搜索軟件包的功能。

三、安裝React Native及輔助工具

安裝React Native

npm install -g react-native-cli

?安裝 Watchman ,它是由 Facebook 提供的監(jiān)視文件系統(tǒng)變更的工具。安裝此工具可以提高開發(fā)時的性能（packager 可以快速捕捉文件的變化從而實(shí)現(xiàn)實(shí)時刷新）。

brew install watchman

?四、React Native 開發(fā)工具

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

五、初始化項(xiàng)目

?命令行初始化

react-native init chapter2

注意：直接執(zhí)行命令，可能會出現(xiàn) TypeError: cli.init is not a function 這個錯誤，里面僅有node_modules，沒有Android、IOS等文件。

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

六、運(yùn)行項(xiàng)目

在終端進(jìn)入chapter2，在用pod install安裝第三方依賴。打開.xcworkspace,和原生運(yùn)行項(xiàng)目一樣的。

也可以直接在終端運(yùn)行：yarn react-native run-ios

注意： 0.60 版本之后的主項(xiàng)目文件是.xcworkspace，不是.xcodeproj。

七、調(diào)試項(xiàng)目

7.1 模擬器：Command + D 打開調(diào)試功能；真機(jī)：晃動設(shè)備即可打開調(diào)試選項(xiàng)。

八、編輯項(xiàng)目

編輯器打開App.js并隨便改上幾行，保存就能看到手機(jī)上的修改了。

?

?

react-native init AwesomeProject

?鏈接：https://www.dianjilingqu.com/637503.html