javascript - How to set the background color of Tab.Navigator?

Question

As you can see below, I've tried many ways of setting the background color to green, all to no avail. The background remains blue like the image.

The inactiveColor and activeColor are working (white and red respectively).

<NavigationContainer>

  <Tab.Navigator
    initialRouteName="HomeScreen"
    activeColor="red"
    inactiveColor="white"
    activeBackgroundColor="green"
    inactiveBackgroundColor="green"
    style={{ backgroundColor: 'green' }}
    tabBarOptions={{
      style:{
        backgroundColor: 'green'
      }
    }}
  >

    <Tab.Screen
      name="HomeScreen"
      options={{
        tabBarLabel: 'Home',
        tabBarIcon: ({ color }) => (
          <MaterialCommunityIcons name="home" color={color} size={26} />
        ),
      }}
    >
    {props => <HomeScreen {...props} state={this.state} />}
    </Tab.Screen>

    <Tab.Screen
      name="Files"
      component={FilesScreen}
      options={{
        tabBarLabel: 'Files',
        tabBarIcon: ({ color }) => (
          <MaterialCommunityIcons name="file" color={color} size={26} />
        ),
      }}
    />

  </Tab.Navigator>

</NavigationContainer>

package.json

"dependencies": {
  "@react-native-community/masked-view": "^0.1.7",
  "@react-navigation/material-bottom-tabs": "^5.1.7",
  "@react-navigation/native": "^5.1.4",
}

Answer 1

在 react-navigation V5 中你可以这样做：

 <Tab.Navigator
    initialRouteName={'Critic'}
    tabBarOptions={{
       activeTintColor: '#fff',
       inactiveTintColor: 'lightgray',
       activeBackgroundColor: '#c4461c',
       inactiveBackgroundColor: '#b55031',
           style: {
                 backgroundColor: '#CE4418',
                 paddingBottom: 3
           }
    }}
>
    <Tab.Screen name="Critic" component={Critic} options={CriticOptions} />
    <Tab.Screen name="Urgent" component={Urgent} options={UrgentOptions} />
    <Tab.Screen name="Moderate" component={Moderate} options={ModerateOptions} />
    <Tab.Screen name="All" component={All} options={AllOptions} />
 </Tab.Navigator>
);

Answer 2

您需要在 screenOptions 中添加背景颜色。 https://reactnavigation.org/docs/bottom-tab-navigator/#screenoptions 试试这个：

<Tab.Navigator screenOptions={{
    tabBarOptions: {
        style: {
            backgroundColor: '#f9f9f9',
        },
    },
}}>

Answer 3

请参阅此处的文档，您需要使用 barStyle。

尝试

<Tab.Navigator
        initialRouteName="Feed"
        shifting={true}
        labeled={false}
        sceneAnimationEnabled={false}
        activeColor="#00aea2"
        inactiveColor="#95a5a6"
        barStyle={{ backgroundColor: '#ffff' }}

Answer 4

在 React Navigation 6.x 中，您使用tabBarStyle

<Tab.Navigator
  screenOptions={({ route }) => ({
    headerShown: false,
    tabBarStyle: {
      height: 90,
      paddingHorizontal: 5,
      paddingTop: 0,
      backgroundColor: 'rgba(34,36,40,1)',
      position: 'absolute',
      borderTopWidth: 0,
  },
})}
  >
  <Tab.Screen name="Home" component={Home} />
  <Tab.Screen name="List" component={RegistrationList} />
  <Tab.Screen name="News" component={News} />
  <Tab.Screen name="Profile" component={Profile} />
</Tab.Navigator>

Answer 5

您可以在 Tab.Navigator 的 tabBarOptions 的属性中设置

<Tab.Navigator screenOptions={({ route }) => ({ .... })}

          tabBarOptions={{
            activeTintColor: 'tomato',
            inactiveTintColor: 'gray',
            showLabel: false,
            style: {backgroundColor: primaryLighterColor,},
          }}
    >

Answer 6

<Navigator
  screenOptions={{
    tabBarActiveTintColor: theme.colors.main,
    tabBarInactiveTintColor: theme.colors.text_detail,
    tabBarShowLabel: false,
    tabBarStyle: {
      paddingVertical: Platform.OS === 'ios' ? 20 : 0,
      height: 78,
      backgroundColor: theme.colors.background_primary
    }
  }}
>