文章/答案/技术大牛

发布

社区首页 >问答首页 >如何设置Tab.Navigator的背景色？

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

Stack Overflow用户

提问于 2020-04-09 00:06:37

回答 5查看 21.7K关注 0票数 10

正如你在下面看到的，我尝试了许多方法将背景颜色设置为绿色，但都没有效果。背景保持与图像一样的蓝色。

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

react-native

react-navigation

react-navigation-bottom-tab

javascript

reactjs

回答 5

Stack Overflow用户

回答已采纳

发布于 2020-04-09 01:01:39

在这里引用documentation，您需要使用barStyle。

尝试

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

票数 7

Stack Overflow用户

发布于 2020-11-06 12:47:42

在react-导航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>
);

票数 12

Stack Overflow用户

发布于 2020-04-09 01:02:21

您需要在screenOptions中添加backgroundColor。https://reactnavigation.org/docs/bottom-tab-navigator/#screenoptions尝试以下命令：

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

票数 10

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/61105084

复制

相似问题

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

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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