Mac下搭建React Native iOS開發環境
阿新 • • 發佈:2018-12-30
安裝依賴
Xcode
從appstore或apple官網安裝
Node.js
brew install node
Watchman
由facebook開發的一款開源的監視本地檔案系統變化的工具,當檔案變更時還可以觸發一些操作,比如重新編譯。點我去watchman官方頁面
brew install watchman
React Native CLI
CLI = Command Line Interface
npm install -g react-native-cli
到這裡RN的開發環境就搭建完成了
HelloWorld你們懂的
使用下面的命令來建立一個叫HelloWorld的工程
react-native init HelloWorld
React Native每次建立一個工程都會下載可多東西,粗略估計了一下要5~6分鐘?推薦安裝yarn,yarn是一個程式碼包管理系統,它會把每次下載的包都儲存下來,之後需要重新安裝時就不用重新下載了,安裝yarn之後建立新工程只需要50秒左右,對React Native來說妥妥的是一個非常能提升使用體驗的工具了。yarn在這裡
執行完成後會看到
接下來執行
cd HelloWorld
react-native run-ios
然後終端上刷刷刷地冒出一大堆build資訊,同時自動打開了另外一個終端,build完成後應該會看到如下畫面
說好的HelloWorld介面上沒有HelloWorld怎麼行,接下來我們開啟index.ios.js稍作修改讓這個程式成為真正的HelloWorld
開啟index.ios.js修改下圖中高亮部分
將第一個Text標籤中的內容修改成HelloWorld,同時去掉不需要的內容,最終程式碼如下:
<View style={styles.container}>
<Text style={styles.welcome}>
Hello World!
</Text>
</View >
儲存退出並在模擬器中按下CMD+R過載介面
噫,頓時感覺人生圓滿。
BKMS
[ISSUE]建立工程出現Use of const in strict mode錯誤。
ReactNativeStudy git:(master) react-native
/usr/local/lib/node_modules/react-native-cli/index.js:266
const rnPackage = options.version;
^^^^^
SyntaxError: Use of const in strict mode.
at Module._compile (module.js:439:25)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Function.Module.runMain (module.js:497:10)
at startup (node.js:119:16)
at node.js:906:3
[Solved]裝最新的node.js。點我到下載頁面