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

Question

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

这就是我最终想要的样子：

The information page

The photos page

通过 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 并设法让它看起来像下图。它工作得很好，我唯一担心的是我创建的边上的白色 space，因为它们是用百分比制作的（宽度：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>
  );
 };

Answer 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>

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

How to create a custom top navigation bar in React Native

reactjs

react-native

react-native-navigation

编辑