如何在Wix的React Native Navigation中集成react-native-code-push？

我之前也碰到过一模一样的问题——用惯了React Navigation里包根组件的模式，换成Wix的原生导航后确实有点懵，毕竟它没有传统意义上的单一根组件。不过其实有两种很实用的方案，下面给你详细拆解，还有完整的Tab应用示例。

核心思路 #

Wix React Native Navigation是通过注册独立屏幕组件再调用启动方法（startTabBasedApp/startSingleScreenApp）来运行的，所以我们不需要硬找一个“根组件”来包裹，而是把CodePush的逻辑整合到屏幕组件的注册流程里，或者在应用启动前先执行全局更新检查。

方案一：用高阶组件(HOC)统一包裹所有屏幕组件 #

这个方案的好处是可以统一配置CodePush的参数，每个屏幕注册时只需要用HOC包裹就行，代码整洁且易于维护。

1. 创建通用的CodePush包装HOC

新建一个withCodePush.js文件：

import CodePush from 'react-native-code-push';

// 在这里统一配置CodePush的全局选项，按需调整
const codePushOptions = {
  checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME, // 可选：ON_APP_START、MANUAL等
  updateDialog: true, // 显示更新确认弹窗
  installMode: CodePush.InstallMode.IMMEDIATE // 可选：ON_NEXT_RESTART、ON_NEXT_RESUME等
};

const withCodePush = (Component) => {
  return CodePush(codePushOptions)(Component);
};

export default withCodePush;

2. 注册Tab屏幕时使用HOC包裹

假设你有两个Tab屏幕：HomeScreen和ProfileScreen，在入口文件（比如App.js）里这样处理：

import { Navigation } from 'react-native-navigation';
import withCodePush from './withCodePush';
import HomeScreen from './screens/HomeScreen';
import ProfileScreen from './screens/ProfileScreen';

// 用HOC包裹屏幕组件后再注册，第三个参数是为了热重载兼容，建议加上
Navigation.registerComponent(
  'app.HomeScreen',
  () => withCodePush(HomeScreen),
  () => HomeScreen
);

Navigation.registerComponent(
  'app.ProfileScreen',
  () => withCodePush(ProfileScreen),
  () => ProfileScreen
);

// 启动Tab应用
Navigation.startTabBasedApp({
  tabs: [
    {
      screen: 'app.HomeScreen',
      label: '首页',
      icon: require('./icons/home.png'),
      selectedIcon: require('./icons/home-selected.png')
    },
    {
      screen: 'app.ProfileScreen',
      label: '我的',
      icon: require('./icons/profile.png'),
      selectedIcon: require('./icons/profile-selected.png')
    }
  ],
  appStyle: {
    tabBarSelectedButtonColor: '#2196F3'
  }
});

方案二：在应用启动前先执行全局更新检查 #

如果你希望整个应用只在启动时检查一次更新，而不是每个屏幕都触发检查，可以在调用startTabBasedApp之前先执行CodePush的同步操作：

import { Navigation } from 'react-native-navigation';
import CodePush from 'react-native-code-push';
import HomeScreen from './screens/HomeScreen';
import ProfileScreen from './screens/ProfileScreen';

// 先注册所有屏幕（无需包裹CodePush）
Navigation.registerComponent('app.HomeScreen', () => HomeScreen);
Navigation.registerComponent('app.ProfileScreen', () => ProfileScreen);

// 启动前先检查更新，更新完成后再初始化导航
CodePush.sync({
  updateDialog: true,
  installMode: CodePush.InstallMode.ON_NEXT_RESTART
}).then(() => {
  // 更新检查完成，启动Tab应用
  Navigation.startTabBasedApp({
    tabs: [/* 你的Tab配置内容 */]
  });
}).catch((error) => {
  console.error('CodePush同步失败:', error);
  // 即使更新失败，也要保证应用正常启动
  Navigation.startTabBasedApp({
    tabs: [/* 你的Tab配置内容 */]
  });
});

注意事项 #

• 用方案一时，记得根据业务需求调整checkFrequency，避免过于频繁的更新检查影响应用性能。
• Wix导航的热重载需要在注册组件时传入第三个参数（原组件），否则热重载可能失效。
• 两种方案可以结合使用：比如启动时全局检查一次，再给每个屏幕配置ON_APP_RESUME的检查，确保用户每次回到应用都能获取最新更新。

内容的提问来源于stack exchange，提问作者Soorena