如何在 React Native 中创建自定义顶部导航栏答案

【问题标题】：How to create a custom top navigation bar in React Native如何在 React Native 中创建自定义顶部导航栏
【发布时间】：2021-01-31 04:11:00
【问题描述】：

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

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

The information page

The photos page

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

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

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,
                backgroundColor: Colors.PRIMARY_TWO,
            },
            style: {
                alignSelf: "center",
                width: '50%',
                borderRadius: 100,
                borderColor: "blue",
                backgroundColor: "white",
                elevation: 5, // shadow on Android
                shadowOpacity: .10, // shadow on iOS,
                shadowRadius: 4, // shadow blur on iOS
            },
            tabStyle: {
                borderRadius: 100,
            },
        }}
        swipeEnabled={true}>
     <ProfileTabNavigator.Screen name="Info" component={ProfileInfoScreen} />
     <ProfileTabNavigator.Screen name="Photos" component={ProfilePhotosScreen} />
   </ProfileTabNavigator.Navigator>
  );
 };

【问题讨论】：

标签： reactjs react-native react-native-navigation

【解决方案1】：

您在使用 createMaterialTopTabNavigator 吗？如果没有，请查看https://reactnavigation.org/docs/material-top-tab-navigator/

看起来像这样：

const TopTabs = createMaterialTopTabNavigator();

function TopTab( ) {
  return (
    <TopTabs.Navigator
      {/* Custom top tab bar */}
      tabBar={(props) => <CustomTabBar {...props} />}
    >
      <TopTabs.Screen
        name={"Screen1"}
        component={ScreenOne}
        options={{ tabBarLabel: "Screen 1"}}
      />
      <TopTabs.Screen
        name={"Screen2"}
        component={ScreenTwo}
        options={{ tabBarLabel: "Screen 2"}}
      />
    </TopTabs.Navigator>
  );
}

要记住的关键一点是，基本上，示例中的 TopTabs 只是一个组件。所以你可以像使用其他组件一样使用它：

  <View style={styles.someStyle}>
    <View style={{width: 150}}>
      <TopTab />
    </View>
  </View>

【讨论】：