如何在React Native中为Tab.Navigator页面设置默认白色背景

解决方案 #

你当前配置的tabBarOptions仅控制底部标签栏的样式，要统一设置所有Tab页面的默认背景，需要在Tab.Navigator的screenOptions属性中配置cardStyle。

适配你当前的版本（React Navigation v5及更早，支持tabBarOptions写法）

直接给Tab.Navigator新增screenOptions配置即可，修改后代码如下：

const Navigation = () => {
    return (
        <NavigationContainer>
            <Tab.Navigator 
                // 新增以下配置
                screenOptions={{
                    cardStyle: { backgroundColor: 'white' }
                }}
                tabBarOptions={{
                    activeTintColor: '#200E32',
                    inactiveTintColor: '#200E32',
                    activeBackgroundColor: 'white',
                    inactiveBackgroundColor: 'white',
                    style: {
                        borderTopColor: '#FFC350',
                        borderTopWidth: 4
                    }
                }}
            >
                {/* 原有的Tab.Screen配置保持不变 */}
                <Tab.Screen
                    options={{
                        tabBarLabel: 'Home',
                        tabBarIcon: ({ color, size }) => (
                            <Image style={{ height: 20, width: 20 }} source={require('./assets/home.png')} />
                        ),
                    }}
                    name="Home"
                    component={HomeScreen}
                />
                <Tab.Screen
                    options={{
                        tabBarLabel: 'My Cart',
                        tabBarIcon: ({ color, size }) => (
                            <Image style={{ height: 20, width: 20 }} source={require('./assets/cart.png')} />
                        ),
                    }}
                    name="Cart"
                    component={MyCartScreen}
                />
                <Tab.Screen
                    options={{
                        tabBarLabel: 'Notification',
                        tabBarIcon: ({ color, size }) => (
                            <Image style={{ height: 20, width: 20 }} source={require('./assets/notification.png')} />
                        ),
                    }}
                    name="Notification"
                    component={NotificationScreen}
                />
                <Tab.Screen
                    options={{
                        tabBarLabel: 'My Account',
                        tabBarIcon: ({ color, size }) => (
                            <Image style={{ height: 20, width: 20 }} source={require('./assets/myaccount.png')} />
                        ),
                    }}
                    name="MyAccount"
                    component={MyAccountScreen}
                />
            </Tab.Navigator>
        </NavigationContainer>
    )
}

如果你使用的是 React Navigation v6（tabBarOptions已废弃）

需要把标签栏的配置也合并到screenOptions中，写法如下：

<Tab.Navigator 
  screenOptions={{
    // 全局页面背景设置
    cardStyle: { backgroundColor: 'white' },
    // 原tabBarOptions配置迁移，属性名新增tabBar前缀
    tabBarActiveTintColor: '#200E32',
    tabBarInactiveTintColor: '#200E32',
    tabBarActiveBackgroundColor: 'white',
    tabBarInactiveBackgroundColor: 'white',
    tabBarStyle: {
      borderTopColor: '#FFC350',
      borderTopWidth: 4
    }
  }}
>
  {/* Tab.Screen 配置保持不变 */}
</Tab.Navigator>

cardStyle属性控制的是每个路由页面的容器默认样式，设置后所有Tab子页面都会默认继承白色背景，不需要单独给每个页面的根节点设置背景色。

内容的提问来源于stack exchange，提问作者DevGe