自定义标签栏反应导航 5答案

【问题标题】：Custom Tab Bar React Navigation 5自定义标签栏反应导航 5
【发布时间】：2020-09-16 04:30:08
【问题描述】：

我正在尝试使用 React Navigation 制作如下图所示的标签栏。

我尝试了一些代码，但没有任何效果。一些代码来自之前的 React Navigation 版本。真正的问题是让标签栏从底部和两侧都有一个边距，并且边框是圆形的。

谁能帮帮我？！

【问题讨论】：

标签： react-native react-navigation react-navigation-v5

【解决方案1】：

这里是演示：https://snack.expo.io/@nomi9995/createbottomtabnavigator-%7C-react-navigation

你可以使用tabBar props 来自定义TABBAR

<NavigationContainer>
      <Tab.Navigator tabBar={props => <MyTabBar {...props} />}>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>

MyTabBar 组件

function MyTabBar({ state, descriptors, navigation }) {
  return (
    <View style={{ flexDirection: 'row',backgroundColor:"#F4AF5F",height:50,borderRadius:50,justifyContent:"center",alignItems:"center" }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        const onLongPress = () => {
          navigation.emit({
            type: 'tabLongPress',
            target: route.key,
          });
        };

        return (
          <TouchableOpacity
            accessibilityRole="button"
            accessibilityStates={isFocused ? ['selected'] : []}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={{ flex: 1, alignItems:"center" }}
          >
            <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
              {label}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

【讨论】：

是的，我可以自定义标签栏内的内容。但是我无法为标签栏制作圆角边框，也无法在标签栏和左/右/底屏幕之间设置边距。
在演示项目中，您可以看到圆形边框，您可以通过更改示例中的样式 ob TouchableOpacity 来在选项卡之间设置边距
在演示代码中，我可以看到一个白色背景，显示屏幕页面和标签栏的限制
你可以给样式属性来调整你的tabbat
我尝试覆盖这个白色背景但没有成功

【解决方案2】：

关键是将样式position: 'absolute' 添加到自定义TabBar 上的外部<View> 容器中。这将摆脱白色背景的问题。

【讨论】：

不，这会使整个导航栏消失