StackNavigator在TabRouter中没有Header

时间:2017-05-25 14:24:19

标签: react-native react-navigation

我自己制作了一个带有渐变背景的自定义TabBar和带有TabRouter的东西(因为你不能用TabNavigator制作一个吧?)。但我的一个标签是StackNavigator,它不会在屏幕顶部显示navBar。我是否需要手动将其添加到CustomTabView?

如果它是StackNavigator,ActiveScreen是否应该处理navBar?

const Tabs = TabRouter(
  {
    Main: {
      // My StackNavigator which should have a navBar on top...
      screen: StackNavigator({
        Dashboard: {
          screen: Dashboard,
          title: 'Dashboard',
        },
        Wallet: { screen: Wallet },
        Deck: { screen: Deck },
        EnterpriseProfile: { screen: EnterpriseProfile },
      }, {
        initialRouteName: 'Dashboard',
      }),
    },
  },
  {
    initialRouteName: 'Main',
    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, paddingTop: Platform.OS === 'ios' ? 20 : 0 }}>
      <ActiveScreen
        navigation={addNavigationHelpers({
          ...navigation,
          state: routes[index],
        })}
      />

     // My Custom TabBar because I don't want the default one from TabNavigator
      <View style={styles.tabContainer}>
        {routes.map(route => (
          <TouchableOpacity key={route.routeName} onPress={() => navigation.dispatch({ type: 'Navigation/BACK' })}
          >
            <TabItem />
          </TouchableOpacity>
        ))}
      </View>
    </View>
  );
};

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

export default TabBar;

0 个答案:

没有答案