React-Native使用Codepush热更新

萧寒2312023-09-13 15:00

React-Native使用Codepush热更新

在开始之前，首先了解一下RN的热更新原理

开始：

首先，在全局安装appcenter

powershell 复制代码 
npm install  -g appcenter-cli

下面对appcenter进行设置

1.登陆

appcenter是微软的，所以我们需要登陆使用，在终端中输入登录命令appcenter login,会自动打开浏览器，可以选择自己喜欢的方式登陆，登陆后会在网页上显token,点击复制复制下来，关闭浏览器，粘贴到终端中，回车。

2.配置命令
  • 查看配置：appcenter profile list
  • 退出登录：appcenter logout
  • 查看所有的登录token：appcenter tokens list
  • 删除一个token：appcenter tokens delete <machineName>
3.appcenter相关操作

以下操作均可在网页版appcenter可视化进行，此处仅说明终端部分

为iOS和安卓分别创建App

**** 备注*：将ownerName替换成你在Appcenter的用户名 ****

针对不同系统分别执行下面的命令

shell 复制代码 
appcenter apps create -d <appDisplayName> -o <operatingSystem>  -p <platform>

例如针对iOS和安卓分别执行如下命令

shell 复制代码 
appcenter apps create -d RNDemoAndroid -o Android -p React-Native
appcenter apps create -d RNDemoiOS -o iOS -p React-Native

在Appcenter创建完App之后需要针对每个App创建Staging和Production 环境对应的Key

shell 复制代码 
appcenter codepush deployment add -a <ownerName>/RNDemoiOS Staging
appcenter codepush deployment add -a <ownerName>/RNDemoiOS Production

例如我创建了一个名为TimeTable的安卓应用，则我的终端显示如图：（使用appcenter apps list查看应用列表）

然后使用appcenter codepush deployment list -k -a <username>/myapp-android查看对应应用的deployment key

到此为止，所有的配置已经结束，接下来就是进入项目中进行

然后进入项目中进行

React-native项目安装Codepush

cd <project name>进入项目目录，然后执行命令：

powershell 复制代码 
npm install --save react-native-code-push
react-native项目中安卓部分修改
1.修改android/settings.gradle，添加如下代码
js 复制代码 
include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-code-push/android/app')
2.修改android/app/build.gradle，添加如下代码
js 复制代码 
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"
3.修改MainApplication.java文件

在文件头部引入codepush类，并override getJSBundleFile(),整体代码如下

java 复制代码 
// 1. Import the plugin class.
import com.microsoft.codepush.react.CodePush;
public class MainApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        ...
        // 2. Override the getJSBundleFile method to let
        // the CodePush runtime determine where to get the JS
        // bundle location from on each app start
        @Override
        protected String getJSBundleFile() {
            return CodePush.getJSBundleFile();
        }
    };
}
4.修改android/app/build.gradle,在buildTypes代码块中添加如下代码

将<INSERT_STAGING_KEY>替换成你在codepush中的deploymentKey

js 复制代码 
 buildTypes {
        debug {
            signingConfig signingConfigs.debug
            ndk {
                abiFilters reactNativeArchitectures()
            }
            // Note: CodePush updates shouldn't be tested in Debug mode as they're overriden by the RN packager. However, because CodePush checks for updates in all modes, we must supply a key.
            resValue "string", "CodePushDeploymentKey", '""'
        }
        //**************************添加代码start***************************************
        releaseStaging {
            // Caution! In production, you need to generate your own keystore file.
            // see https://reactnative.dev/docs/signed-apk-android.
            signingConfig signingConfigs.debug
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
            resValue "string", "CodePushDeploymentKey", '"<INSERT_STAGING_KEY>"'
            matchingFallbacks = ["release"]
        }
        //**************************添加代码end***************************************
        release {
            // Caution! In production, you need to generate your own keystore file.
            // see https://reactnative.dev/docs/signed-apk-android.
            signingConfig signingConfigs.debug
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
            resValue "string", "CodePushDeploymentKey", '"<INSERT_STAGING_KEY>"'
        }
    }
5.js/ts代码

因为是demo项目，我直接更改了本身的app.js代码，实际开发中视情况而定

js 复制代码 
// App.js
import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  Button
} from 'react-native';
import packageInfo from './package.json'
import CodePush from 'react-native-code-push';
import {
  Colors,
  Header,
} from 'react-native/Libraries/NewAppScreen';

/* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
 * LTI update could not be added via codemod */
const Section = ({children, title}) => {
  const isDarkMode = useColorScheme() === 'dark';
  return (
    <View style={styles.sectionContainer}>
      <Text
        style={[
          styles.sectionTitle,
          {
            color: isDarkMode ? Colors.white : Colors.black,
          },
        ]}>
        {title}
      </Text>
      <Text
        style={[
          styles.sectionDescription,
          {
            color: isDarkMode ? Colors.light : Colors.dark,
          },
        ]}>
        {children}
      </Text>
    </View>
  );
};

const App = () => {
  const isDarkMode = useColorScheme() === 'dark';
  
  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  //检查更新方法
  const checkForUpdate = () => {
    CodePush.sync({
      installMode: CodePush.InstallMode.IMMEDIATE,
    },(status)=>{
      switch (status) {
        case CodePush.SyncStatus.UP_TO_DATE:{
          alert("当前已经是最新版本")
        }
        break;
        case CodePush.SyncStatus.UPDATE_INSTALLED:{
          alert("最新版本已安装")
        }
        break;

        default:
        break
      }
      
      console.log(status)
    },()=>{
      
    });
  };
  //清除更新
  const clear = () => {
    CodePush.clearUpdates();
  };
  var name = packageInfo.name;
  var version = packageInfo.version;
  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Section title="项目名称">
            <Text style={styles.highlight}>{name}</Text>  
          </Section>
          <Section title="版本号">
            <Text style={styles.highlight}>{version}</Text>
          </Section>
          <Section title="Version Info">
            <Button title='检查更新' onPress={checkForUpdate}/>
            <Button title='清除更新' onPress={clear}/>
          </Section>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};


const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;

最后打包项目

我更改了package.json中的版本号，然后打包上传了版本。

在终端中执行命令appcenter codepush release-react -a <username>/appname上传版本

使用appcenter codepush deployment list -a <username>/appname可以看到当前用户更新情况，如图：

相关推荐
gxhlh3 天前
React Native防止重复点击
javascript·react native·react.js
miao_zz3 天前
基于react native的锚点
android·react native·react.js
卿卿qing4 天前
【React Native】路由和导航
javascript·react native·react.js
日渐消瘦 - 来自一个高龄程序员的心声5 天前
react native（expo）多语言适配
javascript·react native·react.js·expo
卿卿qing5 天前
【App】React Native
javascript·react native·react.js
日渐消瘦 - 来自一个高龄程序员的心声5 天前
react native（expo）选择图片/视频并上传阿里云oss
react native·react.js·阿里云
恋猫de小郭6 天前
鸿蒙版 React Native 正式开源，ohos_react_native 了解一下
react native·react.js·harmonyos
恋猫de小郭7 天前
React Native 0.76，New Architecture 将成为默认模式，全新的 RN 来了
javascript·react native·react.js
Atypiape213 天前
(零) React Native 项目开发拾遗
android·flutter·react native·ios·typescript·rn
小童不学前端15 天前
如何在移动端app里嵌套web页面之react-native-webview
react native·expo
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04Coze扣子平台完整体验和实践（附国内和国际版对比）05苍穹外卖面试总结06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）08CCF-CSP认证考试 202406-3 文本分词 100分题解09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10浏览器插件——ModHeader 的分享和学习