react-native學習(1)

前記

為啥要學習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刷新代碼,可以在頁面中看到修改后的效果。

寫在最后

邊學習邊記錄,也方便以后查看,希望能溫故知新。

接來下會看看極客學院的視頻,已經看到一個做小頁面的,很簡單,下一篇寫一下怎么做。

我的博客

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容