初識React Native 入門配置篇

這篇博文記錄了我第一次接觸React Native的心酸歷程，在此記錄下來，以便之後查閱，也但願給別的朋友一些幫助。

廢話很少說，不知道React Native是什麼東西的朋友，請自行google，下面開始正文。

因爲我使用的是Mac 因此這裏只針對 OS X系統。

要使用React Native 咱們須要安裝如下工具：

1，homebrew

安裝方法：

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

在終端執行以上命令，等待安裝完成。

2，安裝node

在終端執行：brew install node （注意，這裏安裝的node 只適合React Native開發，並不包含node.js的Web開發功能）

3，第二步完成後 咱們須要安裝watchman

在終端執行：brew install watchman

以上步驟均完成之後 下面咱們就要開始配置IOS和Android的開發環境了，因爲我是Android開發 因此係統已經配置了ANDROID_HOME環境變量，還須要安裝Android sdk，都配置完成之後 就能夠執行下面的操做

安裝 react-native-cli,因爲咱們要從npm官網下載文件 因此須要安全上網法，或者是將npm的倉庫源替換爲國內鏡像

執行

npm config set registry https://registry.npm.taobao.org

npm config set disturl https://npm.taobao.org/dist

而後再執行npm install -g react-native-cli 進行安裝，完成之後 咱們就能夠初始化第一個HelloWorld程序了

執行命令：react-native init HelloWord

這裏時間會比較長，你懂得。等待完成之後 在/Users/x你的用戶名/  目錄下會有一個HelloWorld文件夾打開之後以下圖

這就是咱們的項目文件了，其中index.android.js是Android平臺的程序入口文件index.ios.js固然就是ios平臺的入口文件了。

接下來就是要將項目跑起來了，我是用的真機，將手機鏈接電腦usb，開啓手機的開發者模式，而後進入到HelloWorld這個目錄，執行react-native run-android命令，第一次運行可能會提示找不到Android sdk 目錄，根據提示 在HelloWorld/android 目錄中新建一個文件 名稱爲local.properties 的文件，在裏面寫上 sdk.dir=/xxx/xxx/sdk(這後面是你的sdk目錄)，我第一次運行是這樣解決的，而後我把項目刪除再新建項目後運行就行了，不清楚是爲何。

第二個問題就是權限不足，這個問題 比較簡單 執行sudo chmod -R 777 /xxx 你的項目目錄

而後再次部署項目到設備 基本成功，可是在手機上運行出來是一片空白，什麼都沒有顯示，內心又是一頓抓狂，最後找到緣由，是因爲項目安裝到手機後沒有給顯示懸浮窗的權限，在手機設置裏給添加上這個權限就OK了，再次運行，屏幕一片紅，下方出現了「Reload JS」的按鈕， 顯示異常 ReferenceError:Can't find variable:_fbBatchedBridge，看到這個不要驚慌，使勁搖晃手機 在出來的菜單裏選擇「Dev Settings」，而後點擊最下面的「Debug server host & port for device「，而後填入你電腦的ip:8081必須是你的手機和你的電腦在同一個局域網內才能夠。設置完成之後再重啓應用 你就能夠看到Reac Native的歡迎界面了，就是index.android.js頁面的內容。

好了，這裏給你們推薦一下http://reactnative.cn/  

這裏有不少關於React Native 的技術資料 你們能夠多多學習。