react-native-hot-update

一个基于 react-native-update (Pushy) 深度封装、开箱即用的 React Native 热更新高阶 UI 组件库。

通过最先进的 React Context 数据流驱动与彻底的解耦架构，它不仅为你提供了“拿来即用”的精美默认弹窗，还赋予了你100% 控制反转 (IoC) 的能力，让你可以轻松定制从文案到界面的所有细节。

🌟 核心特性

• 🚀 开箱即用：内置了美观的更新提示弹窗、进度条、应用商店跳转流，一键式集成。
• 📦 极致纯净 (Zero Dependencies)：彻底抛弃 react-native-root-siblings 和其它庞大 UI 库，无环境限制，绝不污染宿主代码。
• ✨ 高级动画体验：内置基于物理弹簧（Spring）的柔和入场动画，告别生硬闪现。
• 🎨 100% UI 控制反转：利用 Render Props，随时可将默认 UI 替换成你自己业务的 UI，而底层严谨的下载与安装逻辑（Controller）依然为你服务。
• 🌍 国际化与文案重写：所有内置弹窗文案支持完全重写或国际化扩展。

📦 安装

首先，你需要安装本库以及其底层核心依赖 react-native-update：

npm install react-native-hot-update react-native-update
# 或
yarn add react-native-hot-update react-native-update

注意：请确保按照 react-native-update 官方文档完成了原生端的必要配置。

📖 基础使用 (Basic Usage)

1. 挂载 Provider

在你的应用最顶层（如 App.tsx），使用 UpdateProvider 包裹你的应用：

import React from 'react'
import { UpdateProvider } from 'react-native-hot-update'
import MainApp from './MainApp'

export default function App() {
  return (
    <UpdateProvider
      appKey="<你的酷传 AppKey>"
      iosAppId="<你的苹果商店 AppID>"   // 可选，过期时提供跳转
      themeColor="#FF4D4F"             // 可选，自定义默认 UI 的主题色
    >
      <MainApp />
    </UpdateProvider>
  )
}

2. 触发更新检查

在你需要触发检查的地方（例如首页加载时，或设置里的“检查更新”按钮），引入 usePushyUpdate：

import React, { useEffect } from 'react'
import { Button, View, ActivityIndicator } from 'react-native'
import { usePushyUpdate } from 'react-native-hot-update'

export default function HomeScreen() {
  const { checkUpdateApp, isChecking } = usePushyUpdate()

  useEffect(() => {
    // 静默检查更新（如果有更新会自动弹出 Modal）
    checkUpdateApp(true)
  }, [])

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {isChecking ? <ActivityIndicator /> : null}
      <Button 
        title="手动检查更新" 
        onPress={() => checkUpdateApp(false)} 
      />
    </View>
  )
}

🛠 高阶使用 (Advanced Usage)

自定义文案 (Localization)

你可以通过 localeText 覆盖任何你不满意的默认文案，或者接入 i18n 字典：

<UpdateProvider
  appKey="YOUR_APP_KEY"
  localeText={{
    updateTitle: '🎉 发现新版本',
    btnUpdateNow: '立刻升级',
    alertDownloadCompleteDesc: '新包已经准备就绪，重启以生效！'
  }}
>
  <MainApp />
</UpdateProvider>

100% 自定义 UI 渲染 (Render Props)

如果你觉得默认的弹窗不符合你们 App 的设计风格，你可以利用 renderUpdateModal 完全接管 UI 渲染。 我们的底层已经为你封装好了极具健壮性的 startDownloadFlow 逻辑流，你只需要负责画 UI 即可。

import { UpdateProvider, UpdateInfo } from 'react-native-hot-update'
import CustomUpdateUI from './my-components/CustomUpdateUI'
import CustomProgressUI from './my-components/CustomProgressUI'

export default function App() {
  return (
    <UpdateProvider
      appKey="YOUR_APP_KEY"
      renderUpdateModal={(updateInfo: UpdateInfo, { hideModal, doUpdate }) => (
        // 完全自定义的“发现更新”界面
        <CustomUpdateUI 
          version={updateInfo.name} 
          desc={updateInfo.description}
          onCancel={hideModal}
          onConfirm={doUpdate} // 这里的 doUpdate 是极其安全的底层流，内部会自动调起下载条和安装包逻辑
        />
      )}
      renderDownloadModal={(progress: { received: number; total: number }, { hideModal }) => (
        // 完全自定义的“下载进度”界面
        <CustomProgressUI 
          percent={Math.floor((progress.received / (progress.total || 1)) * 100)} 
        />
      )}
    >
      <MainApp />
    </UpdateProvider>
  )
}

📚 API Reference

HotUpdateConfig (UpdateProvider Props)

| 参数 | 类型 | 必填 | 说明 | | --- | --- | --- | --- | | appKey | string | 是 | react-native-update 的 AppKey | | iosAppId | string | 否 | App Store 上的应用 ID，用于整包更新时跳转 | | themeColor | string | 否 | 默认 UI 的按钮和进度条主题色 | | localeText | Partial<LocaleText> | 否 | 用于覆盖自带的词条文案 | | renderUpdateModal | (info, handlers) => ReactElement | 否 | 自定义“发现更新”的视图组件 | | renderDownloadModal| (progress, handlers) => ReactElement| 否 | 自定义“下载中”的视图组件 |

usePushyUpdate() 返回值

| 属性/方法 | 类型 | 说明 | | --- | --- | --- | | checkUpdateApp(flag?) | (boolean) => Promise<UpdateInfo> | 核心方法：向服务器发起检查，若有更新将自动拉起弹窗 | | isChecking | boolean | 是否正在请求接口检查中（可用于 Loading UI） | | error | Error \| null | 检查过程中的错误对象 | | updateInfo | UpdateInfo | 更新包的详细内容元数据 | | startDownloadFlow() | () => Promise<void> | 核心控制器：触发下载并自动处理安装流程的底层流 |

📄 License

MIT