MAC OS下,詳細配置安卓和RN混合開發(fā)

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)注

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末丙号,一起剝皮案震驚了整個濱河市先朦,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌犬缨,老刑警劉巖喳魏,帶你破解...
    沈念sama閱讀 222,183評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異怀薛,居然都是意外死亡刺彩,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評論 3 399
  • 文/潘曉璐 我一進店門枝恋,熙熙樓的掌柜王于貴愁眉苦臉地迎上來创倔,“玉大人,你說我怎么就攤上這事焚碌∑枞粒” “怎么了?”我有些...
    開封第一講書人閱讀 168,766評論 0 361
  • 文/不壞的土叔 我叫張陵十电,是天一觀的道長知押。 經(jīng)常有香客問我,道長摆出,這世上最難降的妖魔是什么朗徊? 我笑而不...
    開封第一講書人閱讀 59,854評論 1 299
  • 正文 為了忘掉前任首妖,我火速辦了婚禮偎漫,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘有缆。我一直安慰自己象踊,他們只是感情好温亲,可當我...
    茶點故事閱讀 68,871評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著杯矩,像睡著了一般栈虚。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上史隆,一...
    開封第一講書人閱讀 52,457評論 1 311
  • 那天魂务,我揣著相機與錄音,去河邊找鬼泌射。 笑死粘姜,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的熔酷。 我是一名探鬼主播孤紧,決...
    沈念sama閱讀 40,999評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼拒秘!你這毒婦竟也來了号显?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,914評論 0 277
  • 序言:老撾萬榮一對情侶失蹤躺酒,失蹤者是張志新(化名)和其女友劉穎押蚤,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體羹应,經(jīng)...
    沈念sama閱讀 46,465評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡活喊,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,543評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了量愧。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片钾菊。...
    茶點故事閱讀 40,675評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖偎肃,靈堂內(nèi)的尸體忽然破棺而出煞烫,到底是詐尸還是另有隱情,我是刑警寧澤累颂,帶...
    沈念sama閱讀 36,354評論 5 351
  • 正文 年R本政府宣布滞详,位于F島的核電站,受9級特大地震影響紊馏,放射性物質(zhì)發(fā)生泄漏料饥。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,029評論 3 335
  • 文/蒙蒙 一岸啡、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧赫编,春花似錦巡蘸、人聲如沸奋隶。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,514評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至脐区,卻和暖如春牛隅,著一層夾襖步出監(jiān)牢的瞬間媒佣,已是汗流浹背默伍。 一陣腳步聲響...
    開封第一講書人閱讀 33,616評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人钞馁。 一個月前我還...
    沈念sama閱讀 49,091評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像训措,于是被迫代替她去往敵國和親架馋。 傳聞我的和親對象是個殘疾皇子总珠,可洞房花燭夜當晚...
    茶點故事閱讀 45,685評論 2 360

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