react-native热更新从零到成功中的各种坑
https://github.com/reactnativecn/react-native-pushy/blob/master/docs/guide.md
Android NDK暂时没有安装
在你的项目根目录下运行以下命令:
- 1. npm install -g react-native-update-cli rnpm
成功截图
2. 安装命令示例:(我的0.37)npm install --save react-native-update@4.x
把此工程的相关操作关掉,否则好像会报错(npm ERR! errno -4048)
成功截图:
3.手动link react-native link react-native-update
如果link没有成功就手动添加下面的配置,成功的跳过
iOS
在XCode中的Project Navigator里,右键点击Libraries ➜ Add Files to [你的工程名]
进入node_modules ➜ react-native-update ➜ ios 并选中RCTHotUpdate.xcodeproj`
在XCode中的project navigator里,选中你的工程,在 Build Phases ➜ Link Binary With Libraries 中添加 libRCTHotUpdate.a
Run your project (Cmd+R)
Android
在android/settings.gradle中添加如下代码: include ':react-native-update' project(':react-native-update').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-update/android')
在android/app/build.gradle的 dependencies 部分增加如下代码: compile project(':react-native-update')
检查你的RN版本,如果是0.29及以上, 打开
android/app/src/main/java/[...]/MainApplication.java,否则打开
android/app/src/main/java/[...]/MainActivity.java
在文件开头增加 import cn.reactnative.modules.update.UpdatePackage;
在getPackages() 方法中增加 new UpdatePackage()(注意上一行可能要增加一个逗号)
4.配置Bundle URL(Android)(ios的自己去网上看吧,没有验证不写)
0.29及以后版本:在你的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); } // ... 其它代码 }
5. 登录与创建应用
首先请在http://update.reactnative.cn注册帐号,然后在你的项目根目录下运行以下命令:
$ pushy login
email: <输入你的注册邮箱>
password: <输入你的密码>
cmd允许会出现不是内部命令,
此时用git
这会在项目文件夹下创建一个.update文件,注意不要把这个文件上传到Git等CVS系统上。你可以在.gitignore末尾增加一行.update来忽略这个文件。
登录之后可以创建应用。注意iOS平台和安卓平台需要分别创建:一定要另开一个git窗口输入创建应用的命令或者选择的命令
创建之前:网页截图
创建之后:网页截图,(可以直接网页上创建,也可以用命令行)
创建应用:
$ pushy createApp --platform ios
App Name: <输入应用名字>
$ pushy createApp --platform android
App Name: <输入应用名字>
如果你已经在网页端或者其它地方创建过应用,也可以直接选择应用:
$ pushy selectApp --platform ios
1) 鱼多多(ios)
3) 招财旺(ios)
Total 2 ios apps
Enter appId: <输入应用前面的编号>
截图:
工程根目录:
这主意平台暂时只能创建三个应用,,多了回报错;
选择应用之后,update.json文件内容如下:
添加热更新
1.获取appKey
import { Platform, } from 'react-native'; import _updateConfig from './update.json'; const {appKey} = _updateConfig[Platform.OS];
2.检查更新/下载更新
checkUpdate(appKey) .then(info => { })
3.切换版本
4.首次启动/回滚
完整代码
import React, { Component,} from 'react'; import {AppRegistry, StyleSheet, Platform, Text, View, Alert, TouchableOpacity, Linking,} from 'react-native'; import { isFirstTime, isRolledBack,packageVersion,currentVersion, checkUpdate, downloadUpdate, switchVersion, switchVersionLater, markSuccess,} from 'react-native-update'; import _updateConfig from './update.json'; const {appKey} = _updateConfig[Platform.OS]; class MyProject extends Component { componentWillMount(){ if (isFirstTime) { Alert.alert('提示', '这是当前版本第一次启动,是否要模拟启动失败?失败将回滚到上一版本', [ {text: '是', onPress: ()=>{throw new Error('模拟启动失败,请重启应用')}}, {text: '否', onPress: ()=>{markSuccess()}}, ]); } else if (isRolledBack) { Alert.alert('提示', '刚刚更新失败了,版本被回滚.'); } } doUpdate = info => { downloadUpdate(info).then(hash => { Alert.alert('提示', '下载完毕,是否重启应用?', [ {text: '是', onPress: ()=>{switchVersion(hash);}}, {text: '否',}, {text: '下次启动时', onPress: ()=>{switchVersionLater(hash);}}, ]); }).catch(err => { Alert.alert('提示', '更新失败.'); }); }; checkUpdate = () => { checkUpdate(appKey).then(info => { if (info.expired) { Alert.alert('提示', '您的应用版本已更新,请前往应用商店下载新的版本', [ {text: '确定', onPress: ()=>{info.downloadUrl && Linking.openURL(info.downloadUrl)}}, ]); } else if (info.upToDate) { Alert.alert('提示', '您的应用版本已是最新.'); } else { Alert.alert('提示', '检查到新的版本'+info.name+',是否下载?\n'+ info.description, [ {text: '是', onPress: ()=>{this.doUpdate(info)}}, {text: '否',}, ]); } }).catch(err => { Alert.alert('提示', '更新失败.'); }); }; render() { return ( <View style={styles.container}> <Text style={styles.welcome}> 欢迎使用热更新服务 </Text> <Text style={styles.instructions}> 这是版本一 {'\n'} 当前包版本号: {packageVersion}{'\n'} 当前版本Hash: {currentVersion||'(空)'}{'\n'} </Text> <TouchableOpacity onPress={this.checkUpdate}> <Text style={styles.instructions}> 点击这里检查更新 </Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, }); AppRegistry.registerComponent('MyProject', () => MyProject);
运行会出现如下错误:
装NDK吧
解压下载包并配置环境变量
重启电脑,不然还是会报刚才的错误
接着报了这个错误:
接着又报了另外一个错误:
这个错误就有点坑爹了,不管吧,一次又一次的去重新运行或者重新写index.android.js
终于解决了:
react-native start
react-native run-android
发布应用:
设置签名生成不成功
1.生成一个签名密钥
用keytool命令生成一个私有密钥。在Windows上keytool命令放在JDK的bin目录中(比如C:\Program Files\Java\jdkx.x.x_x\bin),你可能需要在命令行中先进入那个目录才能执行此命令。
$ keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
执行如下:
现在发现$的命令只要不复制前面的符号,只要不出现符号就可以在cmd里面运行了,
Keytools在C盘当前用户没法更改,只需要改权限
设置gradle变量:
把my-release-key.keystore文件放到你工程中的android/app文件夹下。
编辑~/.gradle/gradle.properties(没有这个文件你就创建一个),添加如下的代码(注意把其中的****替换为相应密码)
注意:~表示用户目录,比如windows上可能是C:\Users\用户名,而mac上可能是/Users/用户名。
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****
添加签名到项目的gradle配置文件:android/app/build.gradle
...
android {
...
defaultConfig { ... }
signingConfigs {
release {
storeFile file(MYAPP_RELEASE_STORE_FILE)
storePassword MYAPP_RELEASE_STORE_PASSWORD
keyAlias MYAPP_RELEASE_KEY_ALIAS
keyPassword MYAPP_RELEASE_KEY_PASSWORD
}
}
buildTypes {
release {
...
signingConfig signingConfigs.release
}
}
}
...
生成发行APK包:
只需在终端中运行以下命令:
$ cd android && ./gradlew assembleRelease
译注:cd android表示进入android目录(如果你已经在android目录中了那就不用输入了)。./gradlew assembleRelease在macOS和Linux系统中表示执行当前目录下的名为gradlew的脚本文件,运行参数为assembleRelease,注意这个./不可省略;而在windows命令行下则需要去掉./
运行中:
成功:
测试应用的发行版本:
$ cd android && ./gradlew installRelease
注意installRelease
参数只能在你完成了上面的签名配置之后才可以使用。 你现在可以关掉运行中的packager了,因为你所有的代码和框架依赖已经都被打包到apk包中,可以离线运行了。
同样在win上注意路径问题
发布安卓应用
首先参考文档-生成已签名的APK设置签名, 然后在android文件夹下运行./gradlew assembleRelease,你就可以在android/app/build/outputs/apk/app-release.apk中找到你的应用包。
然后运行如下命令
$ pushy uploadApk android/app/build/outputs/apk/app-release.apk
完成:
发布新的热更新版本(以后更改之后直接发布,不用重新上传)
pushy bundle --platform <ios|android>