在 React Native 中更改 React 导航选项卡的底部栏容器颜色 [英] Change bottom bar container color of react navigation tabs in react native

问题描述

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

I am trying to add border radius to bottom bar but with this i want to change container color from default to purple.

我该怎么做?

到目前为止我做了什么

我想要的

代码:

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

有人可以帮忙吗?

谢谢

推荐答案

你必须添加一个绝对位置，这将使标签栏停留在边框内

You have to add a position absolute which will make the tabbar stay inside the border

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 导航选项卡的底部栏容器颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！