react-native热更新从零到成功中的各种坑

 

https://github.com/reactnativecn/react-native-pushy/blob/master/docs/guide.md

 

Android NDK暂时没有安装

在你的项目根目录下运行以下命令:

  1. 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];
View Code

 

2.检查更新/下载更新

 

checkUpdate(appKey)
    .then(info => {
    })
View Code

 

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);
View Code

 

运行会出现如下错误

 

 

装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
        }
    }
}
...
View Code

 

生成发行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>

 

 

posted @ 2017-01-20 14:57  下雨天rain  阅读(745)  评论(0编辑  收藏  举报