如何在 React Native 中使 Tab.Navigation Screens 默认背景为白色？答案

【问题标题】：How to make the Tab.Navigation Screens default background white in React Native?如何在 React Native 中使 Tab.Navigation Screens 默认背景为白色？
【发布时间】：2021-10-14 16:36:51
【问题描述】：

我有疑问调用了哪些属性来使屏幕在本机反应中默认为白色背景。目前我使用 Tab.Navigator 进行屏幕移动。

这是我当前的屏幕。

常量导航 = () => {

    return (

        <NavigationContainer>
            <Tab.Navigator tabBarOptions={{
                activeTintColor: '#200E32',
                inactiveTintColor: '#200E32',
                activeBackgroundColor: 'white',
                inactiveBackgroundColor: 'white',
                style: {
                    borderTopColor: '#FFC350',
                    borderTopWidth: 4
                }
            }}
            >
                <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-native react-navigation

【解决方案1】：

使用 react-navigation 库中的 DefaultTheme 并设置背景颜色。因此它将为每个屏幕设置默认值，而无需手动指定每个屏幕。

试试这个：

import { DefaultTheme, NavigationContainer } from '@react-navigation/native';

const navTheme = DefaultTheme;
navTheme.colors.background = 'red';

【讨论】：