reactjs - 使用 Wix 的 React Native 导航注册 React Native 代码推送

Question

我用react-native-code-push 。这是:

This plugin provides client-side integration for the CodePush service, allowing you to easily add a dynamic update experience to your React Native app(s).

但是在一些导航的 native 实现中，例如 react-native-navigation没有任何根组件。应用程序将开始调用如下函数:

// index.js

import { Navigation } from 'react-native-navigation';

Navigation.startTabBasedApp({
  tabs: [
    {
      label: 'One',
      screen: 'example.FirstTabScreen', // this is a registered name for a screen
      icon: require('../img/one.png'),
      selectedIcon: require('../img/one_selected.png'), // iOS only
      title: 'Screen One'
    },
    {
      label: 'Two',
      screen: 'example.SecondTabScreen',
      icon: require('../img/two.png'),
      selectedIcon: require('../img/two_selected.png'), // iOS only
      title: 'Screen Two'
    }
  ]
});
// or a single screen app like:
Navigation.registerComponent('example.MainApplication', () => MainComponent);

Navigation.startSingleScreenApp({
  screen: {
    screen: 'example.MainApplication', 
    navigatorButtons: {}, 
    navigatorStyle: {
      navBarHidden: true
    }
  },

})

由于没有根组件，所以不清楚我应该在哪里调用 CodePush，因为通常我应该像高阶组件一样用 CodePush 包装整个根组件。我以前做的事情是:

// index.js
class MyRootComponent extends Component {
  render () {
    return <MainNavigator/> // a navigator using react-navigation
  }
}

let codePushOptions = {
  checkFrequency: CodePush.CheckFrequency.ON_APP_RESUME,
  installMode: CodePush.InstallMode.ON_NEXT_RESUME
}


export default CodePush(codePushOptions)(MyRootComponent)

有没有合适的方法来解决这个问题!？

<小时/>

我知道我可以做到这一点:

Navigation.registerComponent('example.MainApplication', () => CodePush(codePushOptions)(RootComponent));

Navigation.startSingleScreenApp({
  screen: {
    screen: 'example.MainApplication', 
    navigatorButtons: {},
    navigatorStyle: {
      navBarHidden: true
    }
  },

})

但是我应该仅使用导航器来投影我的根组件，这看起来不是一个好主意。我认为这个问题可能有我正在寻找的最佳实践。

<小时/>

更新

我认为在 react-native-navigation 中的 stacknavigator 中注册选项卡导航器会有些复杂，至少我无法克服这个问题。 react-native-navigation 中的 tabBasedApp 和 react-native-code-push 就是我所需要的。

Answer 1

感谢前面的代码片段。我能够对应用程序恢复进行代码推送检查，并使用以下代码立即使用react-native-navigation V2进行更新，而不需要codePush的包装组件。这是应用程序启动逻辑的相关部分。

    Navigation.events().registerAppLaunchedListener(() => {
      console.log('Navigation: registerAppLaunchedListener ')
      start()
    })

    function checkCodePushUpdate () {
      return  codePush.sync({
        checkFrequency: codePush.CheckFrequency.ON_APP_RESUME,
        installMode: codePush.InstallMode.IMMEDIATE,
        deploymentKey: CODEPUSH_KEY,
      })
    }

    function start () {
      checkCodePushUpdate ()
        .then(syncStatus => {
          console.log('Start: codePush.sync completed with status: ', syncStatus)
          // wait for the initial code sync to complete else we get flicker
          // in the app when it updates after it has started up and is
          // on the Home screen
          startApp()
          return null
        })
        .catch(() => {
          // this could happen if the app doesn't have connectivity
          // just go ahead and start up as normal
          startApp()
        })
    }

    function startApp() {
      AppState.addEventListener('change', onAppStateChange)
      startNavigation()
    }

    function onAppStateChange (currentAppState) {
      console.log('Start: onAppStateChange: currentAppState: ' + currentAppState)
      if (currentAppState === 'active') {
        checkCodePushUpdate()
      }
    }

    function startNavigation (registered) {
      console.log('Start: startNavigation')

      registerScreens()

      Navigation.setRoot({
        root: {
          stack: {
            children: [{
              component: {
                name: 'FirstScreen,
              },
            }],
          },
        },
      })
    }