前記
為啥要學習react-native,其實也算要去趕趕潮流吧,畢竟技術也新,還是FB的開源項目,在github也很受歡迎,作為一個前端開發(fā)者,是要了解了解的。
在此記下自己的學習歷程,也算是給自己日后復習用吧,大部分知識是能在網上找到的,在學習中總結下,畢竟對js理解不夠深,如有錯誤待以后再更正。
一.安裝配置
第一步當然是安裝配置開發(fā)環(huán)境,在mac上安裝。window暫時不考慮,也不考慮制作安卓版的app,只運行在ios進行調試。
1.安裝node和homebrew
nodejs可以直接去官網下載最新版,版本號大于4.0,如果以前已經下載了,版本不是最新的,可以更新到最新版本(也可以用nvm管理node的版本)。
首先安裝n模塊:
npm install -g n
升級node.js到最新穩(wěn)定版:
n stable
安裝homebrew,homebrew簡稱brew,是Mac OSX上的軟件包管理工具,能在Mac中方便的安裝軟件或者卸載軟件,在官網復制如下代碼運行。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
在命令行中輸入 brew install watchman,推薦安裝 watchman,否則可能會遇到一個Node.js監(jiān)視文件系統(tǒng)的bug。
如果你希望使用flow來為js代碼加上類型檢查,那么在命令行中輸入brew install flow來安裝flow。
建議定期運行 brew update && brew upgrade 來使您的應用程序保持最新狀態(tài)。
2.安裝xcode
這個太簡單了,直接去appstore里面搜索安裝即可。
3.初始化一個項目
環(huán)境抖配置好了,就可以開始了,首先我們需要初始化一個react-native項目:
$ npm install -g react-native-cli
$ react-native init AwesomeProject
$ cd AwesomeProject/
用終端進入你想要建立項目的目錄中,執(zhí)行代碼,即可得到一個最初始的項目架構了。當然因為npm被墻的原因,所以我們需要用國內的鏡像,否則在執(zhí)行$ react-native init AwesomeProject的時候就傻眼了,一直停在安裝的頁面~讓人蛋疼!我們需要:
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
react-native init AwesomeProject的時候不要在前面加管理員權限,否則會導致一系列權限問題。假如這樣執(zhí)行之后在初始化的時候依然很慢,那就再來幾遍吧,因為我就是這樣的,不過我還試了其他方法,方法的原理都是一樣的,使用淘寶的鏡像。如下:
使用config命令:
npm config set registry https://registry.npm.taobao.org
npm info underscore (如果上面配置正確這個命令會有字符串response)
編輯 ~/.npmrc 加入下面內容:
registry = https://registry.npm.taobao.org
現(xiàn)在初始化項目的時候就快多了吧!ps:init后面的是項目名稱,可自行修改~
二. 項目文件目錄介紹
1. 文件目錄結構
android
...
index.android.js
index.ios.js
ios
...
node_modules
...
package.json
2. 目錄介紹
android是安卓工程,ios是蘋果的工程,這兩個文件夾不需要改。
package.json是一些項目信息。
node_modules是node的模塊,是兩個工程的依賴,不需要修改。
對于我們來說在*.js里面寫代碼即可。不做安卓,只需要在index.ios.js里面修改。當前只有一個頁面,對應這一個文件,項目大的話需要自己繼續(xù)建立其他文件。一般以.ios.js結尾
3. 打開我們的項目
進入項目目錄,找到 ios 這個文件夾,打開 AwesomeProject.xcodeproj 這個文件,默認打開工具是xcode,在xcode中點擊運行即可看到運行的頁面。修改代碼后?-R刷新代碼,可以在頁面中看到修改后的效果。
寫在最后
邊學習邊記錄,也方便以后查看,希望能溫故知新。
接來下會看看極客學院的視頻,已經看到一個做小頁面的,很簡單,下一篇寫一下怎么做。