# rn-update
用于 react-native 的热更新组件包，支持 rncli、expo框架的 Android、iOS平台的bundle文件热更新
## 安装
```sh
npm i @xiaoyu-design/rn-update
yarn add @xiaoyu-design/rn-update
```
## Usage
```jsx
import RNUpdate, { AppUpdate } from "@xiaoyu-design/rn-update"
```
```jsx
// 包裹你的组件树
```
```jsx
import { AppUpdate } from '@xiaoyu-design/rn-update';
// hook使用
const appUpdate = AppUpdate.useUpdate();
const client= useMemo(function() {
return appUpdate.client;
}, [appUpdate]);
// 使用 client 调用api即可
// 如：获取当前已安装的热更新版本信息
client.getCurrentVersionInfo().then(versionInfo => {})
```
## iOS使用
### Swift 使用
```swift
import RnUpdate // 这里要引入
// .... 省略代码
class ReactNativeDelegate: RCTDefaultReactNativeFactoryDelegate {
override func sourceURL(for bridge: RCTBridge) -> URL? {
self.bundleURL()
}
override func bundleURL() -> URL? {
#if DEBUG
return RCTBundleURLProvider.sharedSettings().jsBundleURL(forBundleRoot: "index")
#else
return RCTRnUpdate.bundleURL() // 这里引入
// return Bundle.main.url(forResource: "main", withExtension: "jsbundle")
#endif
}
}
```
### OC使用
```c
// ... 其它代码
#import "RCTRnUpdate.h" // <-- import头文件，注意要放到if条件外面
// rn 版本 >= 0.74 需要修改 bundleURL 方法
- (NSURL *)bundleURL
{
#if DEBUG
// 原先DEBUG这里的写法不作修改
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
return [RCTRnUpdate bundleURL]; // <-- 把这里非DEBUG的情况替换为热更新bundle
#endif
}
// rn 版本 < 0.74 需要修改sourceURLForBridge方法
- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
// 原先DEBUG这里的写法不作修改
return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
return [RCTRnUpdate bundleURL]; // <-- 把这里非DEBUG的情况替换为热更新bundle
#endif
}
```
## Android使用
```java
import com.xiaoyudesign.rnupdate.UpdateContext; // 引入包
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new DefaultReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Nullable
@Override
protected String getJSBundleFile() {
// 这里指定 热更新路径
return UpdateContext.getBundleUrl(MainApplication.this, super.getJSBundleFile());
}
}
}
```
## TestCase
```jsx
import {
Image,
ScrollView,
Text,
TextInput,
TouchableOpacity,
View,
} from 'react-native';
import { useEffect, useMemo, useState } from 'react';
import { AppUpdate } from '@xiaoyu-design/rn-update';
const Notifications = {
show: function(text: string) {
console.log("Notifications: "+ text);
}
}
export function RNUpdateTestCase() {
const appUpdate = AppUpdate.useUpdate();
const [downloadUrl, setDownloadUrl] = useState("http://192.168.2.90:8080/hot-update.zip")
// const [downloadUrl, setDownloadUrl] = useState("http://192.168.1.65:8080/hot-update.zip")
const [downloadVersionCode, setDownloadVersionCode] = useState("100")
const [versionInfo, setVersionInfo] = useState("");
const [downloadVersionInfo, setDownloadVersionInfo] = useState("");
const [checkVersionExistsResult, setCheckVersionExistsResult] = useState("");
const [sourceSrcInfo, setSourceSrcInfo] = useState("");
const client= useMemo(function() {
return appUpdate.client;
}, [appUpdate]);
useEffect(function() {
if(client) {
getVersionInfo();
}
}, [client])
function checkUpdate() {
client.checkUpdate({
versionCode: downloadVersionCode
}).then(r => {
console.log("checkUpdate: ", r);
})
}
function getVersionInfo() {
client.getCurrentVersionInfo().then(versionInfo => {
if(versionInfo) {
setVersionInfo(JSON.stringify(versionInfo));
}
})
}
function onDownloadVersion() {
if(downloadVersionCode == "") {
Notifications.show("请输入版本号")
return;
}
if(downloadUrl == "") {
Notifications.show("请输入下载路径")
return;
}
console.log("当前版本：", downloadVersionCode, "路径：", downloadUrl);
client.downloadPPKVersion({
url: downloadUrl,
newVersion: downloadVersionCode
}).then(res=> {
console.log("downloadPPKVersion res ==>", res);
setDownloadVersionInfo(res ? JSON.stringify(res) : "-")
}).catch(err=> {
setDownloadVersionInfo(err ? JSON.stringify(err) : "-")
console.log("downloadPPKVersion err ==>", err);
})
}
function onRestart() {
if(downloadVersionCode == "") {
Notifications.show("请输入版本号")
return;
}
client.reloadUpdate({
newVersion: downloadVersionCode
}).then(res=> {
if(res) {
if(res.code == 200) {
} else {
Notifications.show(res.msg)
}
}
console.log("restart restart", res);
})
}
function onCheckVersion() {
if(downloadVersionCode == "") {
Notifications.show("请输入版本号")
return;
}
client.checkVersionExists({
versionCode: downloadVersionCode
}).then((res) => {
setCheckVersionExistsResult(JSON.stringify(res))
})
}
console.log("versionInfo==>", versionInfo)
useEffect(() => {
// 测试资源加载
try {
const src = Image.resolveAssetSource(require('../../../assets/images/hot_test.png'));
setSourceSrcInfo(JSON.stringify(src));
} catch (e) {
setSourceSrcInfo(JSON.stringify({
msg: e.message,
code: 500
}));
}
}, []);
return (
{ versionInfo }
}
/>
908
}
/>
setDownloadVersionCode(text)}
/>
}
/>
setDownloadUrl(text)}
/>
}
/>
下载
}
/>
{ downloadVersionInfo }
}
/>
检测版本
}
/>
{ checkVersionExistsResult }
}
/>
切换版本
}
/>
)
}
function RowItem({
title, rightNode
}: {
title: string;
rightNode: React.ReactNode
}) {
return (
{ title }
{ rightNode }
)
}
```