React-navigation 如何将 StackNavigator 放入 TabRouter 屏幕

Question

我遇到了react-navigation 的一些问题。我想要一个自定义标签栏，其中一个屏幕由StackNavigator 组成。

所以基本上，我有

Tab
  -- StackNavigator
     -- Dashboard (main)
     -- Wallet
     -- Etc...
  -- Other tabs...

为了制作我的自定义标签，我使用了TabRouter、createNavigationContainer 和 createNavigator

const Tabs = TabRouter(
  {
    Main: {
      screen: Main,
    },
  },
  {
    initialRouteName: 'Main',
    tabBarComponent: TabView.TabBarBottom,
    swipeEnabled: false,
    animationEnabled: false,
    backBehavior: 'none',
  },
);

const CustomTabView = ({ router, navigation }) => {
  const { routes, index } = navigation.state;
  const ActiveScreen = router.getComponentForState(navigation.state);
  return (
    <View style={{ flex: 1 }}>
      <ActiveScreen
        navigation={addNavigationHelpers({
          ...navigation,
          state: routes[index],
        })}
      />
      <View style={styles.tabContainer}>
        {routes.map(route => (
          <TouchableOpacity                          // custom tab items
            key={route.routeName}
            onPress={() => navigation.navigate(route.routeName)}
          >
            <TabItem />

          </TouchableOpacity>
        ))}
      </View>
    </View>
  );
};

const TabBar = createNavigationContainer(createNavigator(Tabs)(CustomTabView));

主要在哪里：

const Main = StackNavigator({
  Dashboard: Dashboard,
  Wallet: Wallet,
  ...
}, { initialRouteName: 'Dashboard' });

但这不是因为 Dashboard 必须声明一个屏幕。

我做错了什么？我不知道。我们如何在 TabBar 屏幕中放置 StackNavigator？

Answer 1

幸运的是，这很容易。

StackNavigator（或任何其他导航器）返回的是 React 组件。这意味着您可以将它用作任何其他路由的screen 组件。

因此，您的一条路线screen 将是StackNavigator。

示例代码

const Tabs = TabNavigator(
  {
    Main: {
      screen: StackNavigator({
        Dashboard: {
          screen: Dashboard,
        }
        Wallet: {
          screen: Wallet,
        }
      }),
    },
  },
  {
    initialRouteName: 'Main',
    tabBarComponent: TabView.TabBarBottom,
    swipeEnabled: false,
    animationEnabled: false,
    backBehavior: 'none',
  },
);