1.安裝node返敬,已安裝請忽略
2.全局安裝RN的腳手架遂庄,在命令行執(zhí)行 npm install -g react-native-cli,如果報錯在前面加上sudo劲赠,有可能需要輸入電腦密碼涛目;這個步驟不是非必要的,可以只在項目工程里面安裝凛澎,在配package.json的時候指定依賴就好了霹肝。
3.安裝JDK,這個是java運行環(huán)境需要的塑煎;附上下載鏈接:? ? ? ? http://docs.oracle.com/javase/8/docs/technotes/guides/install/mac_jdk.html沫换,這是外網(wǎng)鏈接,如果打不開自行去百度搜索最铁,最好下載最新的
4.安裝Android Studio,必須2.0版本以上讯赏,附上下載鏈接:https://developer.android.com/studio/index.html
5.安裝Genymotion;比起Android Studio自帶的原裝模擬器炭晒,Genymotion是一個性能更好的選擇待逞,但它只對個人用戶免費甥角,需要用戶注冊后网严,并在客戶端登錄才能免費。
附上下載鏈接:https://www.genymotion.com/account/login/
下載和安裝Genymotion(genymotion需要依賴VirtualBox虛擬機嗤无,下載選項中提供了包含VirtualBox和不包含的選項震束,請按需選擇)。
打開Genymotion当犯。如果你還沒有安裝VirtualBox垢村,則此時會提示你安裝。
創(chuàng)建一個新模擬器并啟動嚎卫。
? ? 啟動React Native應(yīng)用后嘉栓,可以按下?+M來打開開發(fā)者菜單。
6.配置ANDROID_HOME環(huán)境變量
? ? a.在命令行執(zhí)行:vi ~/.bash_profile,如果已有這個文件會自動打開侵佃,沒有就會默認創(chuàng)建并自動打開
? ? b.在打開文件里面添加
? ? ? ?export ANDROID_HOME=/Users/majianguang/Library/Android/sdk(注意麻昼,這里要改為自己的sdk地址,不知道的可以在安裝Android Studio后去偏好設(shè)置里面查看)
? ? ? ?export PATH=$PATH:$ANDROID_HOME/tools
? ? ? ?export PATH=$PATH:$ANDROID_HOME/platform-tools
? ?c.如果使用zsh等命令行馋辈,在命令行執(zhí)行: open ~/.zshrc抚芦,同樣把上面的三個配置添加到文件的最后
? ?d.執(zhí)行命令:source ~/.bash_profile,意思是立即讓命令生效迈螟,不必要重啟命令行工具
7.創(chuàng)建工作Android工程叉抡,太簡單不做太多講述,不懂百度/Google一大堆
8.下載Android相關(guān)的SDK和SDKtools
? 打開偏好設(shè)置
勾選相應(yīng)的SDK:
在SDK Platforms窗口中答毫,選擇Show Package Details褥民,然后在Android 6.0 (Marshmallow)中勾選Google APIs、Android SDK Platform 23洗搂、Intel x86 Atom System Image轴捎、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。
在SDK Tools窗口中蚕脏,選擇Show Package Details侦副,然后在Android SDK Build Tools中勾選Android SDK Build-Tools 23.0.1(必須是這個或更高的版本)。然后還要勾選最底部的Android Support Repository驼鞭。內(nèi)存夠大的多安裝也沒關(guān)心秦驯。
點擊Apply或OK進行安裝相關(guān)的東西,耐心等待一會挣棕∫氚可以先把后續(xù)一些東西弄了
9.進入根目錄,創(chuàng)建Package.json文件(在命令行使用npm init)或者拷貝已有的package.json到根目錄下洛心,下面是我自己以前寫的一個package.json固耘,因為我并沒有全局安裝RN,所以我配置RN的依賴
{
"name": "prnkit-android",
"version": "1.0.0",
"description": "",
"main": "index.js",
"author": "",
"license": "ISC",
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "no"
},
"dependencies": {
"react": "16.0.0-alpha.12",
"react-native": "0.48.0-rc.0",
"react-native-cached-image": "^1.3.5",
"single-line-log": "^1.1.2"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "1.9.2",
"colors": "^1.1.2",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.6",
"single-line-log": "^1.1.2"
},
"jest": {
"preset": "react-native"
}
}
成功后可以去node_modules目錄下查看安裝的包是否都已經(jīng)下載安裝成功
10.命令行cd到根目錄词身,執(zhí)行:
curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
下載不成功的厅目,自己去網(wǎng)站https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig下載.flowconfig文件,并放入根目錄
11.在命令執(zhí)行npm install法严,安裝rn以及自己相關(guān)一些依賴
12.修改Android工程配置
? ?在根目錄下的build.gradle(注意不是app文件下的)损敷,在allproject->repositories下添加
maven {
// All of React Native (JS, Android binaries) is installed from npm
url"$rootDir/node_modules/react-native/android"
}
注意自己安裝的node_modules的路徑,因為我直接安裝在安卓項目根目錄下(如果要和ios項目同一套node_module請自己指定目錄)深啤,如下圖
13.打開app/build.gradle文件拗馒,在defaultConfig里面添加:
ndk {
abiFilters "armeabi-v7a", "x86"
}
在buildTypes同級下面添加:
configurations.all {
resolutionStrategy.force 'com.google.code.findbugs:jsr305:1.3.9'
}
在dependencies里面添加:
compile "com.facebook.react:react-native:+" (注意:表示使用最新的RN版本,+號可以改為自己指定的版本)
14.打開AndroidManifest.xml溯街,添加權(quán)限
15.在根目錄創(chuàng)建index.android.js文件诱桂,內(nèi)容如下圖
16.創(chuàng)建MyApplication入口文件洋丐,注意我圈的地方,否則debug模式下是不會彈debug菜單
17.打開AndroidManifest.xml挥等,添加默認啟動為剛創(chuàng)建的MyApplication
18.創(chuàng)建MyReactActivity文件垫挨,注意方法名返回的必須和你在index.android.js注冊的名字一樣
19.直接把啟動頁面設(shè)置我們剛創(chuàng)建的MyReactActivity,即啟動后就是RN頁面
20.在app/src/main/ 下面創(chuàng)建一個assets的文件夾触菜,然后在package.json的scripts命令里面添加
"build-android":"react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --sourcemap-output app/src/main/assets/index.android.map --assets-dest android/app/src/main/res/",
這是一個打包用的
21.在命令行指向npm run bulid-android九榔,進行打包,沒有報錯就說明成功了涡相;打包是為了不是調(diào)試模式下哲泊,需要的bundle包,就是剛才上面說的一個小坑催蝗,不開啟調(diào)試菜單就會使用本地打好的包
22.在命令行執(zhí)行 adb reverse tcp:8081 tcp:8081切威,使用手機或模擬器調(diào)試需要
23.在命令行執(zhí)行 npm run start啟動服務(wù)
24.把Android項目跑起來看效果吧
后續(xù)會有一些RN和原生的交互,歡迎關(guān)注