Question

嗨，我正在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,
                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>
  );
}

要记住的关键一点是，基本上，该示例中的TopTab只是一个组件。因此，您可以像使用其他组件一样使用它：

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

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

编辑

1 个答案: