React Native-Pushy热更新

参考官网

一安装
1. 安装
- 在你的项目根目录下运行以下命令：(根目录通常为带有package.json的)

npm install -g react-native-update-cli rnpm
npm install --save react-native-update

2. 手动和自动link
a. 如果项目为纯RN项目执行以下命令

react-native link react-native-update

b. 如果是RN植入到iOS原生项目,经测试link无用,用cocopods自动链接
- 找到node_modules->react-native-update

 touch react-native-update.podspec

在react-native-update.podspec这个文件中编辑

require "json"package = JSON.parse(File.read(File.join(__dir__, "package.json")))Pod::Spec.new do |s|
s.name = "react-native-update"
s.version = package["version"]
s.summary = "hot update for react-native"
s.author = "author (https://github.com/reactnativecn)"s.homepage = "https://github.com/reactnativecn/react-native-pushy"s.license = "MIT"
s.platform = :ios, "7.0"s.source = { :git => "https://github.com/reactnativecn/react-native-pushy.git", :tag => "#{s.version}" }s.source_files = "ios/**/*.{h,m,c}"s.libraries = "bz2"s.dependency "React"
end

在Podfile中添加路径

pod 'react-native-update' , :path => './node_modules/react-native-update'pod update

3. 配置Bundle URL(iOS)
4. 在工程target的Build Phases->Link Binary with Libraries中加入libz.tbd、libbz2.1.0.tbd
5. 工程中添加代码

#import "RCTHotUpdate.h"
#if DEBUG// 原来的jsCodeLocationjsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
#elsejsCodeLocation=[RCTHotUpdate bundleURL];
#endif

6. iOS的ATS例外配置

右键点击Info.plist，选择open as - source code

<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict><key>reactnative.cn</key><dict><key>NSIncludesSubdomains</key><true/><key>NSExceptionAllowsInsecureHTTPLoads</key><true/></dict>
</dict>
</dict>

二登录与创建应用
1. 注册
- 注册账号
- 在根目录输入

pushy login
email: <输入你的注册邮箱>
password: <输入你的密码>

2. 创建App

pushy createApp --platform ios
App Name: <输入应用名字>

3. 添加代码热更新功能
- 获取appKey

 import {Platform,
} from 'react-native';import _updateConfig from './update.json';
const {appKey} = _updateConfig[Platform.OS];

4. 主要代码

 import {Linking,
} from 'react-native';import {isFirstTime,isRolledBack,packageVersion,currentVersion,checkUpdate,downloadUpdate,switchVersion,switchVersionLater,markSuccess,
} from 'react-native-update';

下载

   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('提示', '更新失败.');});};

设置markSuccess 如果不设置会代码回滚

   if (isFirstTime) {Alert.alert('提示', '这是当前版本第一次启动,是否要模拟启动失败?失败将回滚到上一版本', [{text: '是', onPress: ()=>{throw new Error('模拟启动失败,请重启应用')}},{text: '否', onPress: ()=>{markSuccess()}},]);} else if (isRolledBack) {Alert.alert('提示', '刚刚更新失败了,版本被回滚.');}}

5. 打包
- 打包之前先在工程中打离线包
- 根目录有release_ios文件夹，没有的话创建一个
- 打包程序导出ipa文件
- 注意:update.json 需要跟你的js文件在一个目录下否则会找不到文件也有可能我引入的路径问题

 react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output release_ios/main.jsbundle --assets-dest release_ios/

6. 发布应用

 pushy uploadIpa <your-package.ipa>

7. 发布新的热更新版本
- 程序代码修改后进行更新

 pushy bundle --platform ios

之后根据终端提示操作

 $ 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)
输入YUploading [========================================================] 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)
输入Y
9168) 2.3.0(normal) (newest)Total 1 packages.
Enter packageId: 9168
Ok.

注意:packageId是 bind是返回的四位数字(9168)

React Native-Pushy热更新相关推荐

React Native 实现热更新方案CodePush过程中遇到的问题 ( 搭建自己的CodePush服务器 )
前言 CodePush官方: https://github.com/Microsoft/react-native-code-push 自搭建CodePushServer: https://github ...
react native app应用更新方案
最近公司有需求做一个react native app应用更新方案,试了很多插件都不靠谱最后还是选择了搭配 rn-fetch-blob 进行封装引入 rn-fetch-blob import RN ...
Parcel React 开发服务器热更新实战
parcel Parcel 是 Web 应用打包工具,适用于经验不同的开发者.它利用多核处理提供了极快的速度,并且不需要任何配置. 内容官网教程没有实现devSever和动态更新相结合具体部署步骤. ...
Egret Native项目热更新
http://docs.egret-labs.org/post/tools/native/hot-upgrade.html 概述 Egret的封装项目无论在Android还是iOS平台,均支持热更新. ...
RN：pushy热更新
接入pushy // app.tsx import { initPushyEvent, removePushyEvent } from '@/utils/pushy'; useEffect(() =& ...
React Native安卓实现更新下载、安装
使用ReactNative开发,APP免不了需要更新的功能,iOS直接使用Linking跳转App Store即可,而Android则略显麻烦,需要通过封装Native Modules去调用Andro ...
React Native热更新方案
随着 React Native 的不断发展完善,越来越多的公司选择使用 React Native 替代 iOS/Android 进行部分业务线的开发,也有不少使用 Hybrid 技术的公司转向了 Re ...
React Native 热更新方案
转载: https://blog.csdn.net/xiangzhihong8/article/details/73201421 随着 React Native 的不断发展完善,越来越多的公司选择使用 ...
react-native热更新之code-push
文章部分内容参考:https://blog.csdn.net/qq_33323251/article/details/79437932 但是我在这个基础上进行了补充 code-push已经迁移到 AP ...
iOS开发者React Native学习路线
2019独角兽企业重金招聘Python工程师标准>>> http://blog.talisk.cn/blog/2016/08/13/RN-Learning-path-for-iOS- ...

React Native-Pushy热更新

一安装

1. 安装

2. 手动和自动link

3. 配置Bundle URL(iOS)

4. 在工程target的Build Phases->Link Binary with Libraries中加入libz.tbd、libbz2.1.0.tbd

5. 工程中添加代码

6. iOS的ATS例外配置

二登录与创建应用

1. 注册

2. 创建App

3. 添加代码热更新功能

4. 主要代码

5. 打包

6. 发布应用

7. 发布新的热更新版本

React Native-Pushy热更新相关推荐

最新文章

热门文章

React Native-Pushy热更新

一 安装

1. 安装

2. 手动和自动link

3. 配置Bundle URL(iOS)

4. 在工程target的Build Phases->Link Binary with Libraries中加入libz.tbd、libbz2.1.0.tbd

5. 工程中添加代码

6. iOS的ATS例外配置

二 登录与创建应用

1. 注册

2. 创建App

3. 添加代码热更新功能

4. 主要代码

5. 打包

6. 发布应用

7. 发布新的热更新版本

React Native-Pushy热更新相关推荐

最新文章

热门文章

一安装

二登录与创建应用