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和原生的交互,欢迎关注