当前位置：首页 > news >正文

React Native App 自动检测版本更新完整实现指南

news 2025/11/5 11:33:05

概述

在移动应用开发中，版本更新是一个至关重要的功能。本文基于一个实际项目，详细介绍如何在 React Native 应用中实现完整的自动版本检测和更新功能。该方案支持：

✅ 自动版本检查：应用启动时和定期检查版本更新
✅ 强制更新支持：支持强制更新和可选更新
✅ 智能重试机制：网络失败时自动重试
✅ 应用状态监听：从后台回到前台时自动检查
✅ 美观的更新UI：提供友好的更新对话框
✅ 跨平台支持：支持 Android 和 iOS

架构设计

整体架构图

┌─────────────────────────────────────────────────────────┐
│                    VersionUpdateManager                  │
│              (版本更新管理器 - 顶层组件)                  │
└────────────────────┬────────────────────────────────────┘│┌────────────┴────────────┐│                         │
┌───────▼────────┐      ┌─────────▼──────────┐
│ useVersionCheck│      │ VersionUpdateDialog │
│    (Hook)      │      │   (更新对话框)       │
└───────┬────────┘      └─────────────────────┘│
┌───────▼────────┐
│ versionManager │
│   (工具类)     │
└───────┬────────┘│
┌───────▼────────┐
│ versionService │
│   (API服务)    │
└────────────────┘

核心模块说明

VersionUpdateManager：顶层组件，包装整个应用
useVersionCheck：自定义 Hook，提供版本检查逻辑和状态管理
VersionUpdateDialog：更新对话框 UI 组件
versionManager：版本管理工具类，处理版本比较、检查、下载等
versionService：API 服务层，与后端通信

核心组件详解

1. VersionManager（版本管理工具类）

这是整个版本更新系统的核心，负责：

获取当前应用版本
版本号比较
检查版本更新
下载和安装更新包

关键特性：

单例模式，确保全局唯一实例
版本号语义化比较（支持 x.y.z 格式）
支持强制更新判断逻辑

2. useVersionCheck Hook

提供版本检查的 React Hook，封装了：

自动检查逻辑
定时检查机制
应用状态监听
重试机制
状态管理

关键特性：

支持自定义检查间隔
智能重试机制（避免频繁请求）
监听应用前后台切换

3. VersionUpdateDialog 组件

更新对话框 UI 组件，展示：

版本号信息
更新内容说明
更新包大小
更新/取消按钮

关键特性：

强制更新时隐藏取消按钮
实时显示更新状态（检查中/下载中/安装中）
响应式设计

实现步骤

步骤 1：创建版本 API 服务

首先定义版本信息接口和 API 调用方法。

步骤 2：实现版本管理工具类

创建 VersionManager 单例类，实现版本比较和更新检查逻辑。

步骤 3：开发版本检查 Hook

创建 useVersionCheck Hook，封装版本检查的状态管理和逻辑。

步骤 4：构建更新对话框组件

创建 VersionUpdateDialog 组件，提供友好的更新提示界面。

步骤 5：集成版本更新管理器

在应用入口处集成 VersionUpdateManager 组件。

核心代码实现

1. 版本 API 服务（versionService.ts）

// 使用 axios 或其他 HTTP 客户端
import axios from 'axios';
// 或者使用 fetch API
// const API_BASE_URL = 'https://your-api-server.com';// 版本信息接口
export interface VersionInfo {version: string;minVersion: string;downloadUrl: string;releaseNotes: string;forceUpdate: boolean;updateSize?: string;updateTime?: string;
}// 版本检查响应接口
export interface VersionCheckResponse {code: number;data: VersionInfo;message?: string;error?: string;
}// 当前应用版本信息
export interface CurrentVersionInfo {version: string;platform: 'android' | 'ios';appType?: string; // 可选的应用类型，根据实际需求定义
}// 版本管理服务
export const versionService = {// 获取版本信息（合并了检查更新和获取最新版本的功能）getVersionInfo: async (currentVersion: CurrentVersionInfo): Promise<VersionCheckResponse> => {// 使用 axios（需要配置 baseURL）const API_BASE_URL = 'https://your-api-server.com'; // 替换为实际的API地址const response = await axios.post<VersionCheckResponse>(`${API_BASE_URL}/api/version/info`,currentVersion);return response.data;// 或者使用 fetch// const API_BASE_URL = 'https://your-api-server.com';// const response = await fetch(`${API_BASE_URL}/api/version/info`, {//   method: 'POST',//   headers: { 'Content-Type': 'application/json' },//   body: JSON.stringify(currentVersion),// });// const data = await response.json();// return data;},
};

说明：

VersionInfo：服务器返回的最新版本信息
CurrentVersionInfo：当前应用的基本信息（版本号、平台、应用类型）
getVersionInfo：调用后端 API 获取版本信息

2. 版本管理工具类（versionManager.ts）

import { Platform, Linking } from 'react-native';
import { versionService, VersionInfo, CurrentVersionInfo } from '../api/versionService';
// 根据项目需求，可以导入应用配置或使用默认值
// import { APP_CONFIG } from '../config/appConfig';// 版本比较结果
export type VersionCompareResult = 'newer' | 'same' | 'older';// 版本更新状态
export type UpdateStatus =| 'checking'| 'available'| 'upToDate'| 'downloading'| 'installing'| 'completed'| 'error';// 版本管理器
export class VersionManager {private static instance: VersionManager;private updateStatus: UpdateStatus = 'checking';private currentVersion: CurrentVersionInfo | null = null;private latestVersion: VersionInfo | null = null;private constructor() {}public static getInstance(): VersionManager {if (!VersionManager.instance) {VersionManager.instance = new VersionManager();}return VersionManager.instance;}/*** 获取当前应用版本信息*/public getCurrentVersion(): CurrentVersionInfo {if (this.currentVersion) {return this.currentVersion;}// 从package.json动态获取版本信息let packageVersion = '0.0.1'; // 默认版本try {// 读取package.json的版本号const packageJson = require('../../package.json');packageVersion = packageJson.version || '0.0.1';} catch (error) {console.warn('无法读取package.json版本信息，使用默认版本:', error);}this.currentVersion = {version: packageVersion,platform: Platform.OS as 'android' | 'ios',// 根据实际需求设置应用类型，或从配置文件读取// appType: APP_CONFIG.appType || 'mobile',};return this.currentVersion;}/*** 比较版本号* @param version1 版本1* @param version2 版本2* @returns 比较结果*/public compareVersions(version1: string, version2: string): VersionCompareResult {const v1Parts = version1.split('.').map(Number);const v2Parts = version2.split('.').map(Number);// 补齐版本号位数const maxLength = Math.max(v1Parts.length, v2Parts.length);while (v1Parts.length < maxLength) v1Parts.push(0);while (v2Parts.length < maxLength) v2Parts.push(0);for (let i = 0; i < maxLength; i++) {if (v1Parts[i] > v2Parts[i]) return 'newer';if (v1Parts[i] < v2Parts[i]) return 'older';}return 'same';}/*** 检查版本更新*/public async checkForUpdate(): Promise<{hasUpdate: boolean;versionInfo?: VersionInfo;isForceUpdate: boolean;}> {try {this.updateStatus = 'checking';const currentVersion = this.getCurrentVersion();const response = await versionService.getVersionInfo(currentVersion);// 检查业务状态码：支持 0 或 200 都视为成功const isSuccess = response.code === 0 || response.code === 200;if (!isSuccess) {console.error('[版本检查] API返回错误:', response.message || response.error);return { hasUpdate: false, versionInfo: undefined, isForceUpdate: false };}if (!response.data) {console.error('[版本检查] API响应中没有data字段');return { hasUpdate: false, versionInfo: undefined, isForceUpdate: false };}const latestVersion = response.data;// 比较当前版本与最新版本const isOlderThanLatest =this.compareVersions(currentVersion.version, latestVersion.version) === 'older';// 比较当前版本与最小版本（如果当前版本小于minVersion，则需要更新）const isOlderThanMinVersion =this.compareVersions(currentVersion.version, latestVersion.minVersion) === 'older';// 判断是否需要更新：当前版本小于最新版本 OR 当前版本小于最小版本const hasUpdate = isOlderThanLatest || isOlderThanMinVersion;// 判断是否需要强制更新：// 1. 接口返回的forceUpdate为true// 2. 当前版本小于最小版本（必须强制更新）const isForceUpdate = latestVersion.forceUpdate || isOlderThanMinVersion;console.log(`[版本检查] 当前: ${currentVersion.version}, 最新: ${latestVersion.version}, 最小: ${latestVersion.minVersion}, 需要更新: ${hasUpdate ? '是' : '否'}, 强制更新: ${isForceUpdate ? '是' : '否'}`);if (hasUpdate) {this.latestVersion = latestVersion;this.updateStatus = 'available';return {hasUpdate: true,versionInfo: latestVersion,isForceUpdate,};} else {this.updateStatus = 'upToDate';return {hasUpdate: false,versionInfo: undefined,isForceUpdate: false,};}} catch (error: any) {console.error('版本检查失败:', error);this.updateStatus = 'error';return { hasUpdate: false, versionInfo: undefined, isForceUpdate: false };}}/*** 下载并安装更新*/public async downloadAndInstall(downloadUrl: string): Promise<void> {try {this.updateStatus = 'downloading';// 在Android上，直接打开下载链接if (Platform.OS === 'android') {const canOpen = await Linking.canOpenURL(downloadUrl);if (canOpen) {await Linking.openURL(downloadUrl);this.updateStatus = 'installing';} else {throw new Error('无法打开下载链接');}} else {// iOS通过App Store更新const canOpen = await Linking.canOpenURL(downloadUrl);if (canOpen) {await Linking.openURL(downloadUrl);} else {throw new Error('无法打开App Store');}}} catch (error) {console.error('下载安装失败:', error);this.updateStatus = 'error';throw error;}}/*** 获取更新状态*/public getUpdateStatus(): UpdateStatus {return this.updateStatus;}/*** 获取最新版本信息*/public getLatestVersion(): VersionInfo | null {return this.latestVersion;}/*** 重置更新状态*/public resetUpdateStatus(): void {this.updateStatus = 'checking';}/*** 检查是否为强制更新*/public isForceUpdate(): boolean {return this.latestVersion?.forceUpdate || false;}/*** 清除当前版本缓存，重新读取版本信息*/public resetCurrentVersion(): void {this.currentVersion = null;}
}// 导出单例实例
export const versionManager = VersionManager.getInstance();

核心方法说明：

getCurrentVersion()：从 package.json 读取当前版本号，结合平台和应用类型构建版本信息
compareVersions()：语义化版本比较，支持 x.y.z 格式，返回 newer、same 或 older
checkForUpdate()：
- 调用 API 获取最新版本信息
- 比较当前版本与最新版本、最小版本
- 判断是否需要更新和是否强制更新
downloadAndInstall()：使用 Linking API 打开下载链接（Android）或 App Store（iOS）

3. 版本检查 Hook（useVersionCheck.ts）

import { useState, useEffect, useCallback, useRef } from 'react';
import { AppState, AppStateStatus } from 'react-native';
import { versionManager, UpdateStatus } from '../utils/versionManager';
import { VersionInfo } from '../api/versionService';interface UseVersionCheckOptions {autoCheck?: boolean;checkInterval?: number; // 检查间隔（毫秒）maxRetries?: number; // 最大重试次数retryDelay?: number; // 重试延迟（毫秒）onUpdateAvailable?: (versionInfo: VersionInfo) => void;onUpdateRequired?: (versionInfo: VersionInfo) => void;
}interface UseVersionCheckReturn {isChecking: boolean;hasUpdate: boolean;latestVersion: VersionInfo | null;updateStatus: UpdateStatus;checkForUpdate: () => Promise<void>;showUpdateDialog: () => void;hideUpdateDialog: () => void;isUpdateDialogVisible: boolean;isForceUpdate: boolean;
}export const useVersionCheck = (options: UseVersionCheckOptions = {}): UseVersionCheckReturn => {const {autoCheck = true,checkInterval = 5 * 60 * 1000, // 默认5分钟检查一次maxRetries = 3, // 默认最大重试3次retryDelay = 30000, // 默认重试延迟30秒onUpdateAvailable,onUpdateRequired,} = options;const [isChecking, setIsChecking] = useState(false);const [hasUpdate, setHasUpdate] = useState(false);const [latestVersion, setLatestVersion] = useState<VersionInfo | null>(null);const [updateStatus, setUpdateStatus] = useState<UpdateStatus>('checking');const [isUpdateDialogVisible, setIsUpdateDialogVisible] = useState(false);const [isForceUpdate, setIsForceUpdate] = useState(false);// 使用ref存储重试计数和上次错误时间，避免重新渲染const retryCountRef = useRef(0);const lastErrorTimeRef = useRef(0);const lastCheckTimeRef = useRef(0);const checkForUpdateRef = useRef<(() => Promise<void>) | undefined>(undefined);// 检查更新const checkForUpdate = useCallback(async () => {if (isChecking) return;// 检查距离上次错误的时间，避免频繁重试const now = Date.now();const timeSinceLastError = now - lastErrorTimeRef.current;if (lastErrorTimeRef.current > 0 && timeSinceLastError < retryDelay) {return;}// 检查是否超过最大重试次数if (retryCountRef.current >= maxRetries) {return;}// 记录本次检查时间lastCheckTimeRef.current = now;try {setIsChecking(true);setUpdateStatus('checking');const result = await versionManager.checkForUpdate();// 检查成功，重置重试计数retryCountRef.current = 0;lastErrorTimeRef.current = 0;if (result.hasUpdate && result.versionInfo) {setHasUpdate(true);setLatestVersion(result.versionInfo);setIsForceUpdate(result.isForceUpdate);// 触发回调if (result.isForceUpdate) {onUpdateRequired?.(result.versionInfo);setIsUpdateDialogVisible(true);} else {onUpdateAvailable?.(result.versionInfo);}} else {setHasUpdate(false);setLatestVersion(null);setIsForceUpdate(false);}} catch (error) {console.error('[版本检查] 失败:', error);setUpdateStatus('error');// 增加重试计数retryCountRef.current += 1;lastErrorTimeRef.current = Date.now();} finally {setIsChecking(false);}}, [isChecking, maxRetries, retryDelay, onUpdateAvailable, onUpdateRequired]);// 更新refcheckForUpdateRef.current = checkForUpdate;// 显示更新对话框const showUpdateDialog = useCallback(() => {if (hasUpdate && latestVersion) {setIsUpdateDialogVisible(true);}}, [hasUpdate, latestVersion]);// 隐藏更新对话框const hideUpdateDialog = useCallback(() => {if (!isForceUpdate) {setIsUpdateDialogVisible(false);}}, [isForceUpdate]);// 监听应用状态变化useEffect(() => {if (!autoCheck) return;const handleAppStateChange = (nextAppState: AppStateStatus) => {if (nextAppState === 'active') {// 应用从后台回到前台时检查更新const now = Date.now();const timeSinceLastCheck = now - lastCheckTimeRef.current;// 如果距离上次检查超过1分钟，才检查更新if (timeSinceLastCheck > 60000) {checkForUpdateRef.current?.();}}};const subscription = AppState.addEventListener('change', handleAppStateChange);return () => subscription?.remove();}, [autoCheck]);// 定时检查更新useEffect(() => {if (!autoCheck) return;// 立即检查一次if (checkForUpdateRef.current) {checkForUpdateRef.current();} else {// 延迟一下，等checkForUpdateRef被赋值setTimeout(() => {checkForUpdateRef.current?.();}, 100);}// 设置定时器const interval = setInterval(() => {checkForUpdateRef.current?.();}, checkInterval);return () => clearInterval(interval);}, [autoCheck, checkInterval]);// 监听更新状态变化useEffect(() => {const interval = setInterval(() => {const currentStatus = versionManager.getUpdateStatus();setUpdateStatus(currentStatus);}, 1000);return () => clearInterval(interval);}, []);return {isChecking,hasUpdate,latestVersion,updateStatus,checkForUpdate,showUpdateDialog,hideUpdateDialog,isUpdateDialogVisible,isForceUpdate,};
};

核心功能说明：

自动检查机制：
- 应用启动时立即检查一次
- 按设定的时间间隔定期检查
- 应用从后台回到前台时检查（距离上次检查超过1分钟）
智能重试机制：
- 网络失败时自动重试
- 限制重试次数和重试间隔，避免频繁请求
- 使用 ref 存储重试状态，避免不必要的重新渲染
状态管理：
- 管理检查状态、更新状态、对话框显示状态
- 实时同步 versionManager 的更新状态

4. 更新对话框组件（VersionUpdateDialog.tsx）

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, ScrollView, TouchableOpacity } from 'react-native';
import { versionManager, UpdateStatus } from '../utils/versionManager';
import { VersionInfo } from '../api/versionService';interface VersionUpdateDialogProps {visible: boolean;versionInfo: VersionInfo;onUpdate: () => void;onCancel: () => void;
}export const VersionUpdateDialog: React.FC<VersionUpdateDialogProps> = ({visible,versionInfo,onUpdate,onCancel,
}) => {const [updateStatus, setUpdateStatus] = useState<UpdateStatus>('checking');useEffect(() => {if (visible) {setUpdateStatus(versionManager.getUpdateStatus());}}, [visible]);useEffect(() => {const interval = setInterval(() => {setUpdateStatus(versionManager.getUpdateStatus());}, 1000);return () => clearInterval(interval);}, []);const handleUpdate = async () => {try {onUpdate();await versionManager.downloadAndInstall(versionInfo.downloadUrl);} catch (error) {console.error('更新失败:', error);}};const handleCancel = () => {if (versionInfo.forceUpdate) {return;}onCancel();};if (!visible) return null;return (<View style={styles.overlay}><View style={styles.dialog}>{/* Header */}<View style={styles.header}><Text style={styles.title}>发现新版本</Text><Text style={styles.versionText}>v{versionInfo.version}</Text></View>{/* Content */}<ScrollView style={styles.scrollContent} showsVerticalScrollIndicator={false}><View style={styles.content}>{/* Release Notes */}{versionInfo.releaseNotes && (<View style={styles.releaseNotesContainer}><Text style={styles.releaseNotesTitle}>更新内容</Text><Text style={styles.releaseNotes}>{versionInfo.releaseNotes}</Text></View>)}{/* Update Size */}{versionInfo.updateSize && (<Text style={styles.updateSize}>大小：{versionInfo.updateSize}</Text>)}</View></ScrollView>{/* Footer */}<View style={styles.footer}>{!versionInfo.forceUpdate && (<TouchableOpacityonPress={handleCancel}style={[styles.button, styles.cancelButton]}disabled={updateStatus === 'downloading' || updateStatus === 'installing'}><Text style={styles.cancelButtonText}>稍后更新</Text></TouchableOpacity>)}<TouchableOpacityonPress={handleUpdate}style={[styles.button, styles.updateButton]}disabled={updateStatus === 'downloading' || updateStatus === 'installing'}><Text style={styles.updateButtonText}>{updateStatus === 'downloading' || updateStatus === 'installing'? '更新中...': '立即更新'}</Text></TouchableOpacity></View></View></View>);
};const styles = StyleSheet.create({overlay: {position: 'absolute',top: 0,left: 0,right: 0,bottom: 0,backgroundColor: 'rgba(0, 0, 0, 0.5)',justifyContent: 'center',alignItems: 'center',zIndex: 9999,},dialog: {backgroundColor: '#FFFFFF',borderRadius: 12,maxWidth: 400,width: '85%',maxHeight: '70%',},header: {padding: 20,alignItems: 'center',borderBottomWidth: 1,borderBottomColor: '#F0F0F0',},title: {fontSize: 18,fontWeight: 'bold',color: '#333333',marginBottom: 8,textAlign: 'center',},versionText: {fontSize: 16,color: '#007AFF',fontWeight: '600',},scrollContent: {maxHeight: 250,},content: {padding: 20,},releaseNotesContainer: {marginBottom: 16,},releaseNotesTitle: {fontSize: 16,fontWeight: '600',color: '#333333',marginBottom: 12,},releaseNotes: {fontSize: 14,color: '#666666',lineHeight: 22,},updateSize: {fontSize: 14,color: '#666666',},footer: {flexDirection: 'row',padding: 20,paddingTop: 16,gap: 12,borderTopWidth: 1,borderTopColor: '#F0F0F0',},button: {flex: 1,padding: 12,borderRadius: 8,alignItems: 'center',justifyContent: 'center',},cancelButton: {backgroundColor: '#F5F5F5',borderWidth: 1,borderColor: '#DDDDDD',},cancelButtonText: {fontSize: 16,color: '#333333',},updateButton: {backgroundColor: '#007AFF',},updateButtonText: {fontSize: 16,color: '#FFFFFF',fontWeight: '600',},
});export default VersionUpdateDialog;

组件特性：

模态对话框：使用遮罩层和居中对话框
版本信息展示：显示版本号、更新内容、更新包大小
强制更新处理：强制更新时隐藏取消按钮
状态反馈：实时显示更新状态（检查中/下载中/安装中）
响应式设计：适配不同屏幕尺寸

5. 版本更新管理器（VersionUpdateManager.tsx）

import React from 'react';
import { View } from 'react-native';
import { useVersionCheck } from '../hooks/useVersionCheck';
import { VersionUpdateDialog } from '../components/VersionUpdateDialog';
import { versionManager } from '../utils/versionManager';interface VersionUpdateManagerProps {children: React.ReactNode;autoCheck?: boolean;checkInterval?: number;maxRetries?: number;retryDelay?: number;
}export const VersionUpdateManager: React.FC<VersionUpdateManagerProps> = ({children,autoCheck = true,checkInterval = 5 * 60 * 1000, // 5分钟maxRetries = 3,retryDelay = 30000, // 30秒
}) => {const {hasUpdate,latestVersion,isUpdateDialogVisible,isForceUpdate,showUpdateDialog,hideUpdateDialog,checkForUpdate,} = useVersionCheck({autoCheck,checkInterval,maxRetries,retryDelay,onUpdateAvailable: (versionInfo) => {console.log('发现新版本:', versionInfo.version);// 可以在这里添加自定义逻辑，比如显示通知},onUpdateRequired: (versionInfo) => {console.log('需要强制更新:', versionInfo.version);// 强制更新会自动显示对话框},});const handleUpdate = async () => {if (!latestVersion) return;try {await versionManager.downloadAndInstall(latestVersion.downloadUrl);} catch (error) {console.error('更新失败:', error);}};const handleCancel = () => {hideUpdateDialog();};return (<View style={{ flex: 1 }}>{children}{hasUpdate && latestVersion && (<VersionUpdateDialogvisible={isUpdateDialogVisible}versionInfo={latestVersion}onUpdate={handleUpdate}onCancel={handleCancel}/>)}</View>);
};export default VersionUpdateManager;

组件职责：

包装应用：作为顶层组件，包装整个应用
配置管理：接收配置参数（自动检查、检查间隔、重试次数等）
事件处理：处理更新和取消操作
条件渲染：只在有更新时显示对话框

使用示例

示例 1：在应用入口集成版本更新管理器

import React from 'react';
import { View } from 'react-native';
import { VersionUpdateManager } from './components/VersionUpdateManager';const App = (): React.JSX.Element => {return (<VersionUpdateManager autoCheck={true} checkInterval={5 * 60 * 1000}>{/* 你的应用内容 */}<AppContent /></VersionUpdateManager>);
};export default App;

说明：

将 VersionUpdateManager 包装在应用的根组件外层
设置 autoCheck={true} 启用自动检查
设置 checkInterval 控制检查间隔（5分钟）

示例 2：在设置页面手动检查更新

import React from 'react';
import { View, Text, Button } from 'react-native';
import { useVersionCheck } from './hooks/useVersionCheck';const SettingsScreen: React.FC = () => {const {isChecking,hasUpdate,latestVersion,checkForUpdate,showUpdateDialog,} = useVersionCheck({autoCheck: false, // 不自动检查onUpdateAvailable: (versionInfo) => {console.log('发现新版本:', versionInfo.version);showUpdateDialog(); // 手动显示对话框},});const handleCheckUpdate = async () => {await checkForUpdate();if (hasUpdate) {showUpdateDialog();}};return (<View><Text>当前版本: v1.0.0</Text><Buttontitle={isChecking ? '检查中...' : '检查更新'}onPress={handleCheckUpdate}disabled={isChecking}/>{hasUpdate && latestVersion && (<Text>发现新版本: v{latestVersion.version}</Text>)}</View>);
};

示例 3：自定义检查逻辑

import { useVersionCheck } from './hooks/useVersionCheck';const CustomUpdateChecker: React.FC = () => {const { checkForUpdate, hasUpdate, latestVersion } = useVersionCheck({autoCheck: true,checkInterval: 10 * 60 * 1000, // 10分钟检查一次maxRetries: 5, // 最多重试5次retryDelay: 60000, // 重试延迟60秒onUpdateAvailable: (versionInfo) => {// 自定义处理逻辑if (versionInfo.version.includes('beta')) {// Beta版本不自动弹出console.log('发现Beta版本，不自动提示');} else {// 正式版本自动提示showUpdateDialog();}},onUpdateRequired: (versionInfo) => {// 强制更新处理Alert.alert('必须更新', '请更新到最新版本以继续使用');},});// 组件挂载时检查一次useEffect(() => {checkForUpdate();}, []);return null;
};