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

Posted 2023-02-16

【中文标题】如何在 React Native 中创建自定义顶部导航栏

【英文标题】：How to create a custom top navigation bar in 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>
  );
 ;

【参考方案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>