当给定borderRadius时，如何设置标签栏的backgroundColor？

Question

我想将tabBar中的borderRadius设置为backgroundColor的{​​{1}}，但是问题是{{ 1}}，即使我将tabBar设置为其他颜色也是如此！该如何解决？

tabBar

Answer 1

我找到了解决此问题的简便方法。您可以将路由器放置在视图中并设置视图的背景色。

<View style={{backgroundColor: 'red', flex: 1}}>
 <Router/>
</View>

Answer 2

我发现了另一个解决方法，可以删除空格，使其可以同时用于ios和android

const DEVICE_WIDTH = Dimensions.get('window').width;

    const BottomTabNavigator = createBottomTabNavigator({
        HomeScreenStack,

        },
        {
            tabBarOptions: {
                style:{
                  borderRadius:50,
                  backgroundColor:"tomato",
                  position:'absolute',
                  bottom: 10,
                  padding:10,
                  width: DEVICE_WIDTH -30,
                  left:15,
                  right:15,
                  height: 54,
                  alignItems:'center',
               }
            }
        }
    )

Answer 3

“位置：'绝对'”为我成功了：

tabBar: {
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    borderTopWidth: 0, 
    elevation: 4,
    backgroundColor: '#FBFBFB',
    shadowRadius: 20,
    shadowColor: '#000000',
    shadowOpacity: 0.2,
    position:'absolute'
  }