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

  • Z时代
  • 2024-01-10
  • 分类：综合

react

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>

 

以上是 react-native热更新从零到成功中的各种坑 的全部内容， 来源链接： utcz.com/z/384052.html

回到顶部