反应原生 wix/react-native-navigation

Question

this navigation library 有一些问题。
我看到所有组件都是独立的，但我需要在所有屏幕上都有 HOC。
例如，如果我没有连接，我只想显示一个屏幕，如果连接可用 - 显示当前基于选项卡的应用程序

我该怎么做？

感谢您的任何想法。

注册组件代码

const registerScreens = (appType, store) => {
  switch (appType) {
    case appTypes.ROOT_APP: {
      Navigation.registerComponent(screens.APP, () => App, store, ApolloProvider, { client });
      break;
    }
    case appTypes.SINGLE_BASED_APP:
      Navigation.registerComponent(screens.ONBOARDING, () => OnboardingContainer, store, ApolloProvider, { client });
      break;
    case appTypes.TAB_BASED_APP:
      // App Screens
      Navigation.registerComponent(screens.DISCOVER, () => DiscoverContainer, store, ApolloProvider, { client });
      break;
    default:
      throw new Error('appType is not defined.');
  }
};

Answer 1

您需要 React native 中的 NetInfo API 来检查连接状态。并使用 react-native-navigation 的 Navigation 移动到正确的屏幕 - 单屏应用或基于选项卡的应用。

NetInfo.getConnectionInfo().then((connectionInfo) => {
  if (connectionInfo.type === 'none') {
    Navigation.startSingleScreenApp(params);
  } else {
    Navigation.startTabBasedApp(params);
  }
});