Javascript 如何使用自定义按钮在react native中实现栏导航？

您好，我是React native的新手，希望在这种情况下得到帮助。 如何创建这种导航

这不是一个复制品

---

我不想使用

CreateBottomTabNavigator

，因为正如您所看到的，导航栏位于顶部。

您必须使用自定义选项卡栏来实现这一点

您可以在此处看到自定义选项卡栏的代码

function MyTabBar({ state, descriptors, navigation, position }) {
  return (
    <View style={{ flexDirection: 'row', backgroundColor: 'blue' }}>
      {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"
            accessibilityState={isFocused ? { selected: true } : {}}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
            <Animated.Text
              style={{
                color: isFocused ? 'white' : 'grey',
                marginVertical: 10,
              }}>
              {label}
            </Animated.Text>
            <View
              style={{
                width: '80%',
                backgroundColor: isFocused ? 'white' : 'transparent',
                height: 5,
                marginTop: 'auto',
              }}></View>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

函数MyTabBar（{状态，描述符，导航，位置}）{
返回(
{state.routes.map（（路由，索引）=>{
const{options}=描述符[route.key]；
常数标签=
options.tabBarLabel！==未定义
？options.tabBarLabel
：options.title！==未定义
？选项。标题
：route.name；
const isFocused=state.index==index；
const onPress=（）=>{
const event=navigation.emit({
键入：“tabPress”，
目标：route.key，
});
如果（！isFocused&！event.defaultPrevented）{
导航.导航（路线.名称）；
}
};
const onLongPress=（）=>{
导航.emit({
键入：“tabLongPress”，
目标：route.key，
});
};
返回(

你可以尝尝这道点心

您可以根据需要更改颜色、高度和边距

其他选项是使用renderIndicator或indicatorStyle，但这些选项无法正确选择宽度，因此上面的选项将是最佳选项。
您可以使用我现在正在尝试，无法自定义边框宽度。它占用选项卡的整个长度，但您可以从屏幕上注意到，我需要它大约为80%。您可以更改它t使用指示器样式，让我试试并发布答案。你试过答案了吗？我明天会尝试并让你知道。非常感谢你抽出时间。
<Tab.Navigator tabBar={(props) => <MyTabBar {...props} />}>