小编mau*_*man的帖子

嗨，我正在用 React Native 构建一个应用程序，我想要一个自定义的标签栏。我已经尝试过使用 React 导航，但我不知道如何按照我想要的方式设置样式...

这就是我希望它最终的样子：

信息页面

照片页面

通过反应导航，我可以滑动屏幕并转到其他页面。所以这是非常好的可用性，我想保留（如果可能的话）

我试过在导航器中传递一个自定义组件，但我无法让它工作。所以当干净和原生时它现在看起来像这样：

const ProfileTabScreen = ({ navigation }) => {
  return (
    <ProfileTabNavigator.Navigator>
      <ProfileTabNavigator.Screen name="Info" component={ProfileInfoScreen} />
      <ProfileTabNavigator.Screen name="Photos" component={ProfilePhotosScreen} />
    </ProfileTabNavigator.Navigator>
  );
};

ProfileInfo- 和 ProfilePhotoScreen 组件现在只是空视图，我可以通过顶部导航进行导航。

编辑

谢谢@Hikaru Watanabe，我研究了 createMaterialTopTabNavigator 并设法让它看起来像下图。它工作得非常好，我唯一担心的是我创建的两侧的空白区域，因为它们是由百分比组成的（宽度：45%，左：2.5%）。所以在更大的屏幕上它可能看起来有点不同。这不是最佳选择，但我不知道还有什么方法可以做到。这是唯一在我测试的 iPhone 和 Android 上似乎有效并且看起来相同的东西。

完成它的代码：

const ProfileTabScreen = () => {
    return (
        <ProfileTabNavigator.Navigator tabBarOptions={{
            activeTintColor: Colors.COLOR_WHITE,
            labelStyle: {
                textTransform: "uppercase",
            },
            inactiveTintColor: Colors.COLOR_SUPER_DARK_GREY,
            indicatorStyle: {
                height: null,
                top: '10%',
                bottom: '10%',
                width: '45%',
                left: '2.5%',
                borderRadius: 100, …