iOS開發(fā)RN學習筆記(一)環(huán)境搭建以及項目的創(chuàng)建

Reacet-Native學習筆記以及demo在github的地址

開篇

簡介

Reacet Native 是facebook公司推出的一款能夠跨平臺開發(fā)的框架,其能夠使用js來達到安卓端和iOS端共用一套代碼開發(fā)的目的.Reacet Native 的核心設(shè)計理念是:即擁有Reacet的開發(fā)效率,又能擁有Native的用戶體驗.

Reacet-Native 在github的地址

Reacet-Native 官網(wǎng)地址

開發(fā)前注意

iOS目前支持7.0以上版本,Android支持4.1以上版本

開發(fā)環(huán)境配置

環(huán)境需求

  • 安裝Homebrew

在終端中輸入下面的命令,執(zhí)行的速度可能比較慢,請耐心等待其執(zhí)行完成

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

在終端中輸入下面的命令驗證是否安裝成功

    brew -v
  • 安裝npm和Node.js

下載地址,下載完成后請手動運行安裝,建議使用4.4.4版本

  • 安裝watchMan

該插件用于監(jiān)控bug文件和文件變化 ,并且可以觸發(fā)指定的操作,在終端中輸入下面的命令就可以了

    brew install watchman
  • 安裝Flow

flow是一個 JavaScript 的靜態(tài)類型檢查器,建議安裝它,以方便找出代碼中可能存在的類型錯誤,在終端輸入下面的代碼,如果提示command not found,請加上sudo獲得最高權(quán)限

    brew install flow

React Native安裝

在終端輸入

     npm install -g react-native-cli

至此Reacet Native的環(huán)境就已經(jīng)全部安裝好了

創(chuàng)建Reacet Native項目

在終端中輸入下面命令

     react-native init 項目名稱

如果速度較慢,可以將npm倉庫源替換為國內(nèi)鏡像:

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

默認生成了三個文件夾,android和ios(iOS)為兩個平臺的原生項目,index.android.js和index.ios.js為android和ios平臺下的空殼應(yīng)用文件,我們的代碼一般就寫在這兩個文件內(nèi),客戶端那邊不用重新run就可以看到效果,node_modules文件夾主要是存放框架資源.

對index.ios.js文件的編寫軟件以及提示插件的安裝

我們采用的是WebStorm來對js文件來進行編寫,由于直接編寫并沒有代碼提示,所以這里要安裝一個插件,下載地址,下載完成后file -> import settings -> ReactNative.jar ,完成之后就可以像Xcode那樣能夠自動提示了.

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 173,041評論 25 708
  • Swift版本點擊這里歡迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh閱讀 25,522評論 7 249
  • 在任何的數(shù)據(jù)庫之中, 索引都是一種提升數(shù)據(jù)庫檢索性能的手段,這一點在MongoDB數(shù)據(jù)庫之中同樣是存在的, 在Mo...
    簡人CC閱讀 261評論 0 0
  • “子欲養(yǎng)而親不在,樹欲靜而風不止。”11年10月份去南京學校校招,在南京新街口商場看到幾件合適的爸媽穿的衣服就當時...
    DennisFly閱讀 329評論 3 0
  • 華仔是我們的語文老師,長得和我印象中隔壁老王的兒子差不多。(我家沒隔壁) 今天華仔啟用多媒體,關(guān)鍵的時候出來“...
    鹿亦歌閱讀 231評論 0 0