好久沒有寫博客,一直在用自己的印象筆記記錄一些問題。2017年了,想重新的把博客寫起來。也希望通過這個平臺交一些朋友。
具體的安裝就沒寫,官網以及很多文章都有講,安裝完以后就是下面這樣的。
Egos-MacBook-PRo:Users Egos$ react-native -versionreact-native-cli: 2.0.1react-native: n/a - not inside a React Native project directory介紹幾個需要基本掌握的指令,對于熟悉的同學就跳過了。
nvm list // 查看所有安裝的node版本信息。nvm alias default v7.4.0 // 設置默認的node版本(這里設置成了7.4.0),可能有些版本有些兼容性的問題。nvm ls-remote // 查看更新了的node的版本(可能需要翻墻)nvm install v7.4.0 // 安裝node // 全局安裝react-native命令行工具npm uninstall -g react-native-cli // 先卸載再安裝npm install -g react-native-cli // 可以用一些react-native命令,比如react-native --helpnpm info react-native // 查看某個模塊最新發布版本信息(這里查看react-native發布的版本信息)npm install --save react-native@0.41.1 // 升級或者降級react-native的版本并且更新package.json,需要用在react-native項目目錄下react-native --help // 查看react-native的幫助信息react-native start // 開啟服務react-native run-android // 運行Android主要說明一下每個文件代表的意思,Trinea大大的這篇的文章React Native 你該了解的 Hello World很詳細了。
react-native init HeloWorld // 初始化一個react-natvie項目,網絡原因可能導致比較的慢react-native run-android // 運行到Android手機。android/ios文件夾中存儲的是各自平臺的代碼。到這里以后是可以直接在Android Studio打開android包下面的android項目運行的。index.android.js和index.ios.js分別是Android和IOS的入口。理解為Java的main函數或者Android的LAUNCHER。__tests__ 測試文件夾。package.json,跟Node工程類似,用于描述項目的基本信息以及需要的依賴信息。node_modules文件夾,自動生成的文件夾,存放package.json中的。.watchmanconfig 為 watchman 的配置文件,watchman 用于監控文件變化,輔助實現工程修改所見即所得。.flowconfig 為 flow 的配置文件,flow 用于代碼靜態檢查。.buckconfig 為 buck 的配置文件,buck 是 Facebook 開源的高效編譯系統,對 Android iOS 同時適用,通過復用未修改的代碼單元、增量編譯等提高編譯效率。react-native run-android
以后到底是干了什么?
更新React代碼以后重新reload的操作,可以看出是將代碼重新transforme到手機上。
<START> Updating existing bundle outdated_modules: 1<START> Transforming files<END> Transforming files (1ms)<END> Updating existing bundle (232ms) outdated_modules: 1Requesting bundle (256ms) bundle_url: /index.android.bundle?platform=android&dev=true&hot=false&minify=false不更新代碼reload的操作。沒有transforme操作。
<START> Requesting bundle bundle_url:/index.android.bundle?platform=android&dev=true&hot=false&minify=falseRequesting bundle (16ms)bundle_url:/index.android.bundle?platform=android&dev=true&hot=false&minify=false沒有嘗試使用React Native自帶的打包,使用gradle打包。與普通項目的打包方式是一樣的,如果不知道的話,可以自行搜索解決。
signingConfigs { // 配置release variants打包內容 release { keyAlias signConfig.get('key.alias') keyPassWord signConfig.get('key.alias.password') storePassword signConfig.get('key.store.password') storeFile file(signConfig.get('key.store')) }}buildTypes { release { minifyEnabled enableProguardInReleaseBuilds proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro" signingConfig signingConfigs.release // 配置打包release的時候使用signingConfigs中的release配置 }}還有一些問題,運行錯誤,錯誤不展示,怎么更改入口js的名字等等都可以自行搜索出來,可能我碰到的也不一樣。還有一些比如加速transforme的操作,自己還沒有去實踐。
Learn once, write anywhere. 自己也在ios的模擬器上面跑了一下,也是很方便的。確實可以做到一份代碼就完成了android和ios兩個平臺開發。但是android和ios界面也是有很多不一樣的體驗,當然代碼也是可以做到在兩個平臺的ui分別展示不同的樣式。但對于一個已經比較完善的代碼直接改成React Native來說成本還是比較大的,目前看來可能會在已有的項目中集成React Native。
參考: Facebook官方資料 React Native: 配置和起步 React Native: Android 的打包
新聞熱點
疑難解答