如何设置Tab.Navigator的背景颜色？

Question

正如你在下面看到的，我尝试了很多将背景颜色设置为绿色的方法，但都无济于事。背景像图像一样保持蓝色。

inactiveColor

和

activeColor

正在工作（分别为白色和红色）。

<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 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 2

在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 3

参考这里文档，你需要使用barStyle。

尝试

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

Answer 4

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

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

Answer 5

你可以试试这个

<Tab.Navigator 
screenOptions={{
        headerShown: false,
        gestureEnabled: true,
        gestureDirection: 'horizontal',
        tabBarStyle: {
          backgroundColor: '#3E48A0',
        },
      }}>
</Tab.Navigator>

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
    }
  }}
>

Answer 7

  <Tab.Navigator
    screenOptions={{
    tabBarActiveTintColor: "red",
    tabBarInactiveTintColor: "blue",
    tabBarStyle: {
      height: 55,
    },
    tabBarLabelStyle: {
      fontSize: 14,
      margin: 0,
    },
  }}>

Answer 8

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

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

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

Answer 9

在 Android 上，您可以在“tabBarStyle”中设置属性 null：

<Tab.Navigator
    screenOptions={{
      headerShown: false,
      tabBarStyle: [
        {
          height: WINDOW_HEIGHT * 0.08,
        },
        null,
      ],
    }}>