我本来是 Android 程序猿,公司大领导偷偷带着部下用 RN 开发 APP,准备清洗移动端程序猿,等我知道了,已经晚了,于是我紧急启动学霸模式,学习 React Native , 期间还搞定了他们没有搞定的热更新问题。高兴之余写下这篇博客。
准备:1、已经搭建好 Android 开发环境;2、已经搭建好 React Native 开发环境
注意:Android Studio 要升级到 2.2 以上版本,因为要用到 Ndk
开始:
在你的项目根目录下运行以下命令(逐行运行):
- npm install -g react-native-update-cli rnpm
- npm install --save react-native-update
- react-native link react-native-update
如果 RN 版本低于 0.29,请使用 `rnpm link` 代替 `react-native link` 命令。
`npm install -g react-native-update-cli rnpm` 这一句在每一台电脑上仅需运行一次。
* 注意 * 如果访问极慢或者显示网络失败,请设置使用淘宝镜像(也仅需设置一次):
- npm config set registry https: //registry.npm.taobao.org --global
- npm config set disturl https: //npm.taobao.org/dist --global
安装命令示例:
- npm install --save react-native-update
如果上面的命令都运行成功,基本上是没有问题了,你可以用 Android Studio 打开 Android 项目查看有没有如下依赖,如果有就没问题了
- dependencies {
- compile project(':react-native-update')//出现这一行
- compile fileTree(dir: "libs", include: ["*.jar"])
- compile "com.android.support:appcompat-v7:23.0.1"
- compile "com.facebook.react:react-native:+" // From node_modules
- }
1. 在 `android/settings.gradle` 中添加如下代码:
如果没有出现,你需要手动 link,下面是手动 link 的步骤,如果上面成功了,下面可以跳过
- include ':react-native-update'
- project(':react-native-update').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-update/android')
2. 在 `android/app/build.gradle` 的 dependencies 部分增加如下代码:
- compile project(':react-native-update')
- 在 `getPackages()` 方法中增加 `new UpdatePackage()`(注意上一行可能要增加一个逗号)
- 在文件开头增加 `import cn.reactnative.modules.update.UpdatePackage;`
3. 检查你的 RN 版本, 如果是 0.29 及以上, 打开 `android/app/src/main/java/[...]/MainApplication.java`, 否则打开 `android/app/src/main/java/[...]/MainActivity.java`
link 完成后配置 Bundle URL,在你的 MainApplication 中增加如下代码:
- import cn.reactnative.modules.update.UpdateContext;
- public class MainApplication extends Application implements ReactApplication {
- private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
- @Override
- protected String getJSBundleFile() {
- return UpdateContext.getBundleUrl(MainApplication.this);
- }
- // ... 其它代码
- }
- }
`0.28 及以前版本 `:在你的 MainActivity 中增加如下代码:
- import cn.reactnative.modules.update.UpdateContext;
- public class MainActivity extends ReactActivity {
- @Override
- protected String getJSBundleFile() {
- return UpdateContext.getBundleUrl(this);
- }
- // ... 其它代码
- }
首先请在点击打开链接注册帐号,然后在你的项目根目录下运行以下命令:
登录与创建应用
- pushy login
- email: <输入你的注册邮箱>
- password: <输入你的密码>
在刚才的网站登录之后可以创建应用。注意 iOS 平台和安卓平台需要分别创建,创建完成后,回到命令行选择应用
这会在项目文件夹下创建一个 `.update` 文件,注意不要把这个文件上传到 Git 等 CVS 系统上。你可以在 `.gitignore` 末尾增加一行 `.update` 来忽略这个文件。
- $ pushy selectApp --platform android
- 103) 鱼多多(android)321) 招财旺(android)Total 2 ios apps
- Enter appId: <输入应用前面的编号,上面的103,321>
完成上面步骤之后你运行项目会报 NDK 相关的错误,所以刚开始的时候我建议要把 Android Studio 升级到 2.2 以上,下面来配置 NDK 环境
```
}
}
"appKey": "<一串随机字符串>"
"appId": 2,
"android": {
},
"appKey": "<一串随机字符串>"
"appId": 1,
"ios": {
{
```bash
选择或者创建过应用后,你将可以在文件夹下看到 `update.json` 文件,其内容类似如下形式:
Android Studio2.2 开始推荐开发者使用 CMake 去构建本地代码,在构建之前,我们需先安装下面三个依赖:
可能不同版本显示的名字或者版本不一样,但是选择这三个在点 Apply 就行,等着下载安装完成。
安装完成后打开你的 Android 项目中的 build.gradle,做如下配置:
- android {...defaultConfig {...externalNativeBuild {
- cmake {
- //设置编译工具链
- arguments "-DANDROID_TOOLCHAIN=clang"
- //需编译生成的ABI类型
- abiFilters 'x86',
- 'x86_64',
- 'armeabi',
- 'armeabi-v7a',
- 'arm64-v8a'
- }
- }
- ndk {
- //打包进APK的ABI类型
- abiFilters "armeabi",
- "armeabi-v7a",
- "x86"
- }
- }
- externalNativeBuild {
- cmake {
- //配置CMakeLists.txt的路径
- path 'CMakeLists.txt'
- }
- }...
- }
理论上说配置上面的代码后,你的项目结构会变成这样:
但是 1 和 2 我的都没有出现,怎么办?我的做法就是新建一个项目,注意新建项目时有以下选项 你新建的项目的目录会和上面的一样,我就把新建项目中的如下文件拷贝到自己项目中相应的位置:
新建一个 cpp 路径拷贝下面的文件
打开这个. cpp 文件,在这个方法名中用红色框圈起来的是你项目的包名,你要记得修改成自己的包名
改完以后你可以运行自己的项目,我运行的时候报错,是关于 build 的,以我以前 Android 开发的经验,把 app 目录下的 build 文件夹删掉,重新运行,就成功了
来源: http://blog.csdn.net/y280903468/article/details/69568221