我们假设您已经能够配置 React Native 开发环境，并且已经开发完毕您的 App 了。
接下来，我们来配置热更新，让发布变得更简单吧。
一、安装 Android NDK
1、首先需要下载 NDK 包，
2、设置环境变量 ANDROID_NDK_HOME
$ vi ~/.bash_profile
ANDROID_NDK_HOME=/你的NDK地址
export PATH=${PATH}:其他变量:${ANDROID_NDK_HOME}
$ source ~/.bash_profile
二、打包签名App
1、生成签名文件
keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
此命令使用 keytool 生成一个签名文件 my-release-key.keystore，使用此签名文件 my-release-key.keystore 对已经开发完毕的 App 签名，生成 release 包进行发布。
2、设置gradle变量
把my-release-key.keystore文件放到你工程中的android/app文件夹下。
编辑~/.gradle/gradle.properties（没有这个文件你就创建一个），添加如下的代码（注意把其中的****替换为相应密码）
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****
3、添加签名到项目的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
}
}
}
...
4、添加 NDK
修改 项目根目录/android 下的 local.properties 文件（如果没有，可以新建此文件）
sdk.dir=/你的 Android SDK 路径
ndk.dir=/你的 Android NDK 路径
5、生成发行App包
项目根目录下运行如下命令：
$ cd android && ./gradlew assembleRelease
三、安装热更新
1、在你的项目根目录下运行以下命令：
npm install -g react-native-update-cli rnpm
npm install --save react-native-update@具体版本请看下面的表格
react-native link react-native-update
npm install -g react-native-update-cli rnpm 这一句在每一台电脑上仅需运行一次。
如果RN版本低于0.29，请使用rnpm link代替react-native link命令。
因为React Native不同版本代码结构不同，因而请按下面表格对号入座：
| React Native版本 | react-native-update版本 |
|---|---|
| <= 0.26 | 1.0.x |
| 0.27 - 0.28 | 2.x |
| 0.29 - 0.33 | 3.x |
| 0.34 - 0.39 | 4.x |
| 0.40 | 暂不支持 |
2、配置Bundle URL(Android)
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);
}
// ... 其它代码
}
四、创建pushy帐号
1、注册帐号
打开 http://update.reactnative.cn/
创建帐号，帐号为 YOUR_ACCOUNT， 密码为 YOUR_PWD(记住，后期会用到)
并创建一个应用，如下图1，填入应用名称，选择一个平台。创建后，如下图2。
2、命令行中，项目根目录下运行以下命令：
$ pushy login
email: <`YOUR_ACCOUNT`>
password: <`YOUR_PWD`>
3、创建或选择 App
登录之后可以创建应用。注意iOS平台和安卓平台需要分别创建：（如果已经创建则可以跳过）
$ pushy createApp --platform ios
App Name: <输入应用名字>
$ pushy createApp --platform android
App Name: <输入应用名字>
两次输入的名字可以相同，这没有关系。
如果你已经在网页端或者其它地方创建过应用，也可以直接选择应用：
$ pushy selectApp --platform ios|android
1) AppName1(android)
3) AppName2(ios)
Total 2 ios apps
Enter appId: <输入应用前面的编号>
五、App添加热更新功能
修改项目根目录下的 index.android.js，下面为完整的示例：
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);
六、发布带热更新功能的App
1、上传 apk 到 pushy
我们先在android文件夹下运行 ./gradlew assembleRelease，你就可以在 android/app/build/outputs/apk/app-release.apk 中找到你的应用包。
然后运行如下命令，即可上传apk以供后续版本比对之用。
$ pushy uploadApk android/app/build/outputs/apk/app-release.apk
2、发布新版
我们可以尝试修改一行代码(譬如将版本一修改为版本二)，然后生成新的热更新版本。
$ pushy bundle --platform <ios|android>
Bundling with React Native version: 0.22.2
<各种进度输出>
Bundled saved to: build/output/android.1459850548545.ppk
Would you like to publish it?(Y/N)
如果想要立即发布，此时输入Y。当然，你也可以在将来使用pushy publish --platform <ios|android> <ppkFile>来发布版本。
Uploading [========================================================] 100% 0.0s
Enter version name: <输入版本名字，如1.0.0-rc>
Enter description: <输入版本描述>
Enter meta info: {"ok":1}
Ok.
Would you like to bind packages to this version?(Y/N)
此时版本已经提交到update服务，但用户暂时看不到此更新，你需要先将特定的包版本绑定到此热更新版本上。
此时输入Y立即绑定，你也可以在将来使用 pushy update --platform <ios|android> 来使得对应包版本的用户更新。 除此以外，你还可以在网页端操作，简单的将对应的包版本拖到此版本下即可。
Offset 0
1) FvXnROJ1 1.0.1 (no package)
2) FiWYm9lB 1.0 [1.0]
Enter versionId or page Up/page Down/Begin(U/D/B) <输入序号,U/D翻页,B回到开始，序号就是上面列表中)前面的数字>
1) 1.0(normal) - 3 FiWYm9lB (未命名)
Total 1 packages.
Enter packageId: <输入包版本序号，序号就是上面列表中)前面的数字>
版本绑定完毕后，客户端就应当可以检查到更新并进行更新了。
