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));

Main是：

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

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

我做错了什么？我不知道。我们如何将StackNavigator放入TabBar屏幕？

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',
  },
);

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

1 个答案: