React native 如何在react native中自定义react导航底部选项卡？

我正在尝试在我的应用程序中自定义底部选项卡。我正在使用

react导航/底部选项卡：5.8.0

。我希望底部选项卡采用以下样式

---

是否可以为底部选项卡定制样式？。如果以前有人尝试过，请帮助。任何帮助都是非常值得的。谢谢。

我会使用自定义选项卡栏来制作我想要的底部栏

import { View, Text, TouchableOpacity } from 'react-native';

function MyTabBar({ state, descriptors, navigation }) {
  const focusedOptions = descriptors[state.routes[state.index].key].options;

  if (focusedOptions.tabBarVisible === false) {
    return null;
  }

  return (
    <View style={{ flexDirection: 'row' }}>
      {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,
            canPreventDefault: true,
          });

          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 }}
          >
            <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
              {label}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

// ...

<Tab.Navigator tabBar={props => <MyTabBar {...props} />}>
  {...}
</Tab.Navigator>

从'react native'导入{视图、文本、TouchableOpacity}；
函数MyTabBar（{状态，描述符，导航}）{
const focusedOptions=描述符[state.routes[state.index].key].options；
if（focusedOptions.tabBarVisible===false）{
返回null；
}
返回(
{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，
默认值：true，
});
如果（！isFocused&！event.defaultPrevented）{
导航.导航（路线.名称）；
}
};
const onLongPress=（）=>{
导航.emit({
键入：“tabLongPress”，
目标：route.key，
});
};
返回(
{label}
);
})}
);
}
// ...
}>
{...}

也许我同样的问题答案会有所帮助。