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

Posted 2023-02-19

【中文标题】如何在 React Native 中使 Tab.Navigation Screens 默认背景为白色？

【英文标题】：How to make the Tab.Navigation Screens default background white in React Native?

【发布时间】：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>
    )

【参考方案1】：

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

试试这个：

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

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