如何在React Native中的容器下嵌套选项卡导航？

Question

如何创建选项卡式导航，如图所示？使用tabBarPosition似乎我只能将标签栏设置为＆＃39; top＆＃39;或者＆＃39;底部＆＃39;整个屏幕？有没有办法在容器内做类似的事情？我使用的是https://reactnavigation.org/，但如果您有其他建议，那就太棒了（一个易于使用的库，可以让我轻松地为标题，按钮等应用自定义样式）。

Answer 1

您可能需要自己定制导航器。 以下是文档：https://reactnavigation.org/docs/navigators/custom

以下是如何做到这一点的示例： https://github.com/react-community/react-navigation/blob/master/examples/NavigationPlayground/js/CustomTabs.js

Answer 2

按照@Tyreal Gray的建议，我创建了一个自定义导航器。

这是一些示例代码。

const CustomTabBar = ({ navigation }) => {

  let selectedIndex = navigation.state.index;
  let isSelected = false;
  const { routes } = navigation.state;
  return (
    <View style={styles.tabContainer}>
      {routes.map((route, index) => {

        selectedIndex === index ? isSelected = true : isSelected = false;

        let textColor = isSelected ? 'blue' : 'gray';

        return (
        <TouchableOpacity
          onPress={() => navigation.navigate(route.routeName)}
          style={styles.tab}
          key={route.routeName}
        >
          <Text style = {{color: textColor}}>{route.routeName}</Text>
        </TouchableOpacity>
      )
    })}
    </View>
  );
};

const CustomTabView = ({ router, navigation }) => {

  const { routes, index } = navigation.state;
  const ActiveScreen = router.getComponentForState(navigation.state);
  return (
    <KeyboardAwareScrollView>
    <View style={styles.container}>
      <CustomTabBar navigation={navigation} />
      <ActiveScreen
        navigation={addNavigationHelpers({
          ...navigation,
          state: routes[index],
        })}
      />
    </View>
    </KeyboardAwareScrollView>
  );
};

const CustomTabRouter = TabRouter(
  {
    Details: {
      screen: DetailsScreen,
      path: '',
    },
    Media: {
      screen: MediaScreen,
      path: 'media',
    },
    Reviews: {
      screen: CreateReviewFlow,
      path: 'reviews',
    },
  },
  {
    // Change this to start on a different tab
    initialRouteName: 'Details',
  }
);

const CustomTabs = createNavigationContainer(
  createNavigator(CustomTabRouter)(CustomTabView)
);