1. 程式人生 > >Mac下搭建React Native iOS開發環境

Mac下搭建React Native iOS開發環境

安裝依賴

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。點我到下載頁面