react-native - 在 React Native 中更改 React 导航选项卡的底部栏容器颜色

标签 react-native react-navigation react-navigation-bottom-tab

我正在尝试将边框半径添加到底部栏,但是有了这个
我想将容器颜色从默认更改为紫色。

我怎样才能做到这一点 ?

到目前为止我做了什么

enter image description here

我要什么

enter image description here

代码:

tabBarOptions: {
      activeTintColor: colors.primary,
      inactiveTintColor: colors.black,
      showLabel: false,
      style: {
        borderWidth: 0.5,
        borderBottomWidth: 1,
        backgroundColor: 'white',
        borderTopLeftRadius: 20,
        borderTopRightRadius: 20,
        borderColor: colors.lightGrayText,
      },
    },

任何人都可以帮忙吗?

谢谢

最佳答案

您必须添加一个绝对位置,这将使标签栏保持在边框内

tabBarOptions={{
          activeTintColor: 'red',
          inactiveTintColor: 'black',
          showLabel: false,
          style: {
            borderWidth: 0.5,
            borderBottomWidth: 1,
            backgroundColor: 'red',
            borderTopLeftRadius: 20,
            borderTopRightRadius: 20,
            borderColor: 'grey',
            position: 'absolute'
          },
        }}>

引用
https://github.com/react-navigation/react-navigation/issues/5928

关于react-native - 在 React Native 中更改 React 导航选项卡的底部栏容器颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62242349/

相关文章:

javascript - 如何在 React Native 中定义全局变量?

react-native - DrawerNavigator 在点击每个选项时始终显示标签栏

reactjs - 在嵌套堆栈导航器中的 BottomTabBar 中导航会导致比以前更多的渲染

javascript - React Native - 如何在返回上一页时刷新 FlatList?

javascript - React Native 中的 If/else 语句

ios - 样式表违规可按下错误 : "pointerEvents" is not a valid style property

javascript - React Native + Icons : Warning: Failed prop type: Invalid props.样式键tintColor提供给ForwardRef(Text)

react-native - 我的 FlatList 中有一个 Header 组件,如何使第一个 Item 与 Header 的底部重叠?

javascript - React-navigation重置说明

react-native - tabBarOnPress 在 React Navigation v5 中不可用