RN - pushy热更新 - IOS&RN 配置

作者: Th丶小伟 | 来源:发表于2019-04-28 11:28 被阅读0次

RN - pushy热更新 - IOS&RN 配置
RN-热更新-pushy
RN热更新react-native-pushy
RN热更新：React-Native-Pushy
RN基于pushy之热更新一
RN热更新之Android篇
RN精进笔记（十二）热更新篇
codepush3之Android原生引用集成
2020-04-08RN热更新
RN 热更新之Xcode配置

配置IOS

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

npm i -g react-native-update-cli 每台电脑仅需运行一次
npm i react-native-update@5.x   (RN 版本在0.46以上)
react-native link react-native-update

react-native link react-native-update 针对由RN命令行创建出来的项目
由Xcode创建的虽然现实成功但还需要自己配置
在项目目录运行一下代码：

cd node_modules/react-native-update
touch react-native-update.podspec

寻找到 node_modules/react-native-update/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

在项目的cocoapod里面添加： ./是当前目录 ../是父级目录 /是根目录根据自己项目调整

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

pod update

在项目根目录生产离线包：

curl http://localhost:8081/index.bundle?platform=ios -o main.jsbundle

在把离线包放在ios 项目里面

在IOS代码里面修改

连接到本地：
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios&dev=true"];
连接到线上：
jsCodeLocation=[RCTHotUpdate bundleURL];

在这里IOS配置没有意外的话就配置完毕

接下来需要把RN的代码上传到pushy上面

pushy配置

登录与创建应用

首先请在pushy注册帐号，然后在你的项目根目录下运行以下命令

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

登录之后可以创建应用。注意iOS平台和安卓平台需要分别创建

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

创建应用后，你将可以在文件夹下看到update.json文件，其内容类似如下形式：

{
    "ios": {
        "appId": 1,
        "appKey": "<一串随机字符串>"
    } 
}

配置JS代码：

创建index.js 、 App.js

//index.js:
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName,() => App);


//App.js:

/**
 * Created by siri on 2019/3/28.
 */
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];



export default  class World 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 => {
            switchVersion(hash);

        }).catch(err => {
            Alert.alert('提示', '更新失败.');
        });
    };
    checkUpdate = () => {
        checkUpdate(appKey).then(info => {
            if (info.expired) {
                info.downloadUrl && Linking.openURL(info.downloadUrl);

            } else if (info.upToDate) {
                Alert.alert('提示', '您的应用版本已是最新.');
            } else {
                this.doUpdate(info)
            }
        }).catch(err => {
            Alert.alert('提示', '更新失败.');
        });

    };
    appUpdate = () => {
        checkUpdate(appKey).then(info => {
            if (info.expired) {
                // info.downloadUrl && Linking.openURL(info.downloadUrl);

            } else if (info.upToDate) {
                // Alert.alert('提示', '您的应用版本已是最新.');
            } else {
                this.doUpdate(info)
            }
        }).catch(err => {
            // Alert.alert('提示', '更新失败.');
        });

    };
    render(){
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    欢迎使用热更新服务
                </Text>
                <Text style={styles.instructions}   >
                    当前包版本号: {packageVersion}{'\n'}
                    当前版本Hash: {currentVersion||'(空)'}{'\n'}
                    {this.appUpdate()}
                </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,
    },
});

JS代码功能：
服务器的代码需要自己更新拉取。在官方例子中做了一些修改：
一进入就主动查看是否更新。是就自己下载并刷新界面。

发布应用

打包之前需要生成离线包在跟目录下执行

curl http://localhost:8081/index.bundle?platform=ios -o main.jsbundle
/*
热更新地址  对应于项目里面的jsCodeLocation=[RCTHotUpdate bundleURL];
*/

把main.jsbundle 拖入工程里面

照常打 ipa包
在项目根目录执行命令

pushy uploadIpa (ipa包目录)   
输出：Ipa uploaded 表示更新上传成功  Error: Validation error 一般是ios版本号没有改

pushy bundle --platform ios
<各种输出>
Would you like to publish it?(Y/N)  Y

Enter version name: <输入版本名字，如1.0.0-rc>
Enter description: <输入版本描述>
Enter meta info: {"ok":1}
Would you like to bind packages to this version?(Y/N) Y  (是否将特定的包版本绑定到此热更新版本上)

Enter packageId: (上一条命令行输入Y之后的第一个数字)