构建独立应用程序后,React Navigation MaterialTopTabNavigator背景颜色更改为绿色

时间:2019-02-02 18:08:05

标签: react-native react-navigation expo

我使用了React导航createMaterialTopTabNavigator并在tabBarOptions下将背景设置为白色,并且在用Expo测试我的应用程序时效果很好,但是在执行独立应用程序sdk并用我的Android手机安装它之后,该选项卡的背景色已更改变成绿色...为什么会发生这种行为?!

我的代码:

import React, { Component } from 'react';
import {View} from "react-native";
import {createMaterialTopTabNavigator } from 'react-navigation';
import HomeStackNav from './HomeStackNav';
import SuperMarketStackNav from './SuperMarketStackNav';
import NotificationsStackNav from './NotificationsStackNav';
import MoreStackNav from './MoreStackNav';
import {MaterialIcons} from '@expo/vector-icons';
import {SimpleLineIcons} from '@expo/vector-icons';
import {Dimensions} from "react-native";
import NotificationIndicator from "../containers/GlobalReusableContainers/NotificationIndicatorContainer";

//Get width of mobile screen
var width = Dimensions.get("window").width;

export default createMaterialTopTabNavigator({
    Home: {
        screen: HomeStackNav,
        navigationOptions: {
            tabBarIcon: ({ tintColor }) => (
                <SimpleLineIcons
                name="home"
                size={25}
                color={tintColor}
                />
            ),
        },
    },
    Favourites: {
        screen: FavouritesStackNav,
        navigationOptions: {
            tabBarIcon: ({ tintColor }) => (
                <SimpleLineIcons
                name="grid"
                size={22}
                color={tintColor}
                />
            )
        },
    },
    Notifications: {
        screen: NotificationsStackNav,
        navigationOptions: {
            tabBarIcon: ({ tintColor }) => (
                <View >
                    <SimpleLineIcons
                        name="bell"
                        size={25}
                        color={tintColor}
                    />
                    <NotificationIndicator/>
                </View>
            )
        },
    },
    Search: {
        screen: SearchScreen,
        navigationOptions: {
            tabBarIcon: ({ tintColor }) => (
                <MaterialIcons
                name="more-vert"
                size={28}
                color={tintColor}
                />
            ),
        },
    },
    More: {
        screen: MoreStackNav,
        navigationOptions: {
            tabBarIcon: ({ tintColor }) => (
                <MaterialIcons
                name="more-vert"
                size={28}
                color={tintColor}
                />
            ),
        },
    },
}, 
{
    swipeEnabled: true,
    animationEnabled: true,
    tabBarPosition: 'bottom',
    tabBarOptions: {
        showLabel: false,
        showIcon: true,
        inactiveTintColor: '#909090',
        activeTintColor: '#005e71',
        pressColor: '#005e71',
        indicatorStyle: { backgroundColor: '#005e71'},
        style: {
            backgroundColor: '#ffffff',
        }
    },
});

enter image description here

0 个答案:

没有答案