React Native热更新(iOS)-Pushy
发布时间:2020-12-15 07:12:07 所属栏目:百科 来源:网络整理
导读:React Native 的出现,使的开发 iOS 代码出现了更便捷的方式。由于 RN 是使用脚本语言编写的,实现了“解释执行”的方式,而这种执行方式的修改只需替换脚步即可,不需要重新发布程序,热更新的方式极大的方便了迭代开发。 今天我们选择的热更新组件是 Pushy
今天我们选择的热更新组件是 下面介绍如何利用Pushy进行热更新:1. 创建react native工程
2. 安装update工具,Pushy热更新需要update配合使用
3. 在PushyDemo目录下添加Pushy组件并自动link
$ npm install --save react-native-update
$ react-native link react-native-update
$ npm install --save react-native-update@2.x
$ rnpm link react-native-update
$ npm install --save --save-exact react-native-update@1.0.x
$ rnpm link react-native-update
4. 配置Bundle URL
#import "RCTHotUpdate.h"
#if DEBUG
// 原来的jsCodeLocation
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
#else
jsCodeLocation=[RCTHotUpdate bundleURL];
#endif
5. 配置ATS
NSAppTransportSecurity
NSExceptionDomains
reactnative.cn
NSIncludesSubdomains
6. 登录与创建应用
$ pushy
loginemail: <输入你的注册邮箱>
password: <输入你的密码>
$ pushy createApp --platform ios
App Name: <输入应用名字>
7. 添加热更新
import {
Platform,} from 'react-native';
import _updateConfig from './update.json';
const {appKey} = _updateConfig[Platform.OS];
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('提示','更新失败.' + err);
});
};
8. 发布iOS应用
$ pushy uploadIpa PushyDemo.ipa
Uploading [==================================================================] 100% 0.0s
Ipa uploaded: 2362
GandalfdeiMac:PushyDemo gandalf$ pushy bundle --platform ios
Bundling with React Native version: 0.34.0
[2016-09-27 14:21:58] Building Dependency Graph
编译信息......(略)
[2016-09-27 14:22:25] Building Dependency Graph (26748ms)
transformed 368/368 (100%)
[2016-09-27 14:22:32] Finding dependencies (28763ms)
bundle: start
bundle: finish
bundle: Writing bundle output to: /Users/gandalf/Documents/kelvin/Github/HotUpdate/PushyDemo/build/intermedia/ios/index.bundlejs
bundle: Copying 5 asset files
bundle: Done writing bundle output
bundle: Done copying assets
Packing
Bundled saved to: build/output/ios.1474957297204.ppk
Would you like to publish it?(Y/N) Y
Uploading [==================================================================] 100% 0.0s
Enter version name: 1.1.0
Enter description: change upgrade description
Enter meta info: {"ok": 1}
Version published: 5244
Would you like to bind packages to this version?(Y/N) Y
2362) 1.0(normal) (newest)
Total 1 packages.
Enter packageId: 2362
OK.
9. 发布热更新版本
$ pushy bundle --platform ios
Bundling with React Native version: 0.34.0
[2016-09-27 14:33:39] Building Dependency Graph
编译信息......(略)
[2016-09-27 14:33:51] Building Dependency Graph (12461ms)
transformed 369/369 (100%)
[2016-09-27 14:33:54] Finding dependencies (10696ms)
bundle: start
bundle: finish
bundle: Writing bundle output to: /Users/gandalf/Documents/kelvin/Github/HotUpdate/PushyDemo/build/intermedia/ios/index.bundlejs
bundle: Done writing bundle output
bundle: Copying 6 asset files
bundle: Done copying assets
Packing
Bundled saved to: build/output/ios.1474958010480.ppk
Would you like to publish it?(Y/N) Y
Uploading [==================================================================] 100% 0.0s
Enter version name: 1.2.0
Enter description: add image
Enter meta info: {"ok": 1}
Version published: 5247
Would you like to bind packages to this version?(Y/N) Y
2362) 1.0(normal) - 5244 Fv97KfnZ 1.1.0
Total 1 packages.
Enter packageId: 2362
Ok.
10. 点击客户端的刷新按钮,即可看到有更新版本的提示到此,已经完成了植入代码热更新的全部工作。参考资料如下 https://github.com/reactnativecn/react-native-pushy/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |