MAC OS下,详细配置安卓和RN混合开发

1.安装node,已安装请忽略

2.全局安装RN的脚手架,在命令行执行 npm install -g react-native-cli,如果报错在前面加上sudo,有可能需要输入电脑密码;这个步骤不是非必要的,可以只在项目工程里面安装,在配package.json的时候指定依赖就好了。

3.安装JDK,这个是java运行环境需要的;附上下载链接:        http://docs.oracle.com/javase/8/docs/technotes/guides/install/mac_jdk.html,这是外网链接,如果打不开自行去百度搜索,最好下载最新的

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,则此时会提示你安装。

创建一个新模拟器并启动。

    启动React Native应用后,可以按下⌘+M来打开开发者菜单。

6.配置ANDROID_HOME环境变量

    a.在命令行执行:vi ~/.bash_profile,如果已有这个文件会自动打开,没有就会默认创建并自动打开

    b.在打开文件里面添加

       export ANDROID_HOME=/Users/majianguang/Library/Android/sdk(注意,这里要改为自己的sdk地址,不知道的可以在安装Android Studio后去偏好设置里面查看)

       export PATH=$PATH:$ANDROID_HOME/tools

       export PATH=$PATH:$ANDROID_HOME/platform-tools

   c.如果使用zsh等命令行,在命令行执行: open ~/.zshrc,同样把上面的三个配置添加到文件的最后

   d.执行命令:source ~/.bash_profile,意思是立即让命令生效,不必要重启命令行工具

7.创建工作Android工程,太简单不做太多讲述,不懂百度/Google一大堆

8.下载Android相关的SDK和SDKtools

  打开偏好设置

勾选相应的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。内存够大的多安装也没关心。



点击Apply或OK进行安装相关的东西,耐心等待一会。可以先把后续一些东西弄了

9.进入根目录,创建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目录下查看安装的包是否都已经下载安装成功

10.命令行cd到根目录,执行:

curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

下载不成功的,自己去网站https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig下载.flowconfig文件,并放入根目录

11.在命令执行npm install,安装rn以及自己相关一些依赖

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,添加权限

15.在根目录创建index.android.js文件,内容如下图


16.创建MyApplication入口文件,注意我圈的地方,否则debug模式下是不会弹debug菜单

17.打开AndroidManifest.xml,添加默认启动为刚创建的MyApplication


18.创建MyReactActivity文件,注意方法名返回的必须和你在index.android.js注册的名字一样

19.直接把启动页面设置我们刚创建的MyReactActivity,即启动后就是RN页面


20.在app/src/main/ 下面创建一个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,进行打包,没有报错就说明成功了;打包是为了不是调试模式下,需要的bundle包,就是刚才上面说的一个小坑,不开启调试菜单就会使用本地打好的包

22.在命令行执行 adb reverse tcp:8081 tcp:8081,使用手机或模拟器调试需要

23.在命令行执行 npm run start启动服务

24.把Android项目跑起来看效果吧




后续会有一些RN和原生的交互,欢迎关注

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容