RN navigation 中的tabar在Android中背景显示成蓝色

最新推荐文章于 2021-07-05 20:12:23 发布

原创最新推荐文章于 2021-07-05 20:12:23 发布 · 331 阅读

0 ·

CC 4.0 BY-SA版权

ReactNative 专栏收录该内容

31 篇文章

订阅专栏

本文介绍在使用React Navigation的TabNavigator时，如何解决Android平台上的背景颜色异常问题。通过添加tabBarComponent属性引用TabBarBottom组件，确保了在Android设备上也能正确显示白色背景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用TabNavigator的时候，在iOS上显示正常，但是在Android中显示的有问题，如下图，背景成了蓝色了。
这里写图片描述
经过查看官网文档。明白了少写了一个属性。tabBarComponent:TabBarBottom, 字面理解就是tabbar组件，注意这是一个组件，需要导入，但是iOS中少了也没关系，可能是为了适配Android。

import {
    StackNavigator,
    TabNavigator,
    TabBarBottom,
} from 'react-navigation';

//设置tabbar
 {
        tabBarOptions: {
            activeTintColor: '#3DCCCA',
            backgroundColor: 'white',
            showIcon: 'true',
            style:{
                fontSize:12
            }
        },
        tabBarPosition:'bottom',
        swipeEnabled:false,
        tabBarComponent:TabBarBottom,

    }