React Native 应用程序中的底部标签背景颜色

Question

我在我的 expo 应用程序中使用反应导航和底部标签。
我已经指定了一些这样的选项：

  <TabStack.Navigator
      initialRouteName="Compte"
      tabBarOptions={{
        activeTintColor: EAppColors.PRIMARY_GREEN,
        labelStyle: {
          fontFamily: 'BeVietnam-Regular',
          fontSize: normalize(12),
          fontStyle: 'normal',
          lineHeight: 20,
          textAlign: 'center',
          marginBottom: 5,
        },
        tabStyle: {
          alignItems: 'center',
          justifyContent: 'center',
          height: 40,
          marginTop: '3.5%',
        },
        style: { paddingHorizontal: '5%' },
      }}>

我需要在标签栏的左侧和右侧放置一些顶部半径，但后面的视图保持其颜色....

如何改变后面视图的颜色？（图片左上角灰色）

Answer 1

用 View 和一些 backgroundColor

包裹你的 <TabStack.Navigator></TabStack.Navigator>

像这样

<View style={{ flex:1, backgroundColor: 'red' }}> // Or whatever color you want
  <TabStack.Navigator>
      // All TabScreens etc.. here
  </TabStack.Navigator>
</View>

React Native 应用程序中的底部标签背景颜色

bottom-tabs background color in react native app

tabbar

react-native

react-navigation

expo