Question

我已经使用ReactNative创建了一个应用，并且正在使用react-navigation来浏览我的应用。

我正在尝试添加activeTintColor，以便活动标签获得唯一的颜色，但是什么也没有发生。文字保持白色。

为什么会这样？

我已经看过docs，并按照指示进行了操作，但无济于事。

有人知道要解决我的问题吗？（为什么activeTintColor无法在我的应用中正常工作？）

导航文件

  import React from 'react';
    import { Platform,View, Text, StyleSheet, } from 'react-native';
    import { createStackNavigator, createBottomTabNavigator, } from 'react-navigation';

    class HomeScreen extends React.Component {
        static navigationOptions = {
            title: 'Home',
            activeTintColor: '#000',
        };
        render() {
            return (
                <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                    <Text>Home Screen</Text>
                </View>
            );
        }
    } 

    class SettingsScreen extends React.Component {
        static navigationOptions = {
            title: 'Settings',

        };
        render() {
            return (
                <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                    <Text>Settings Screen</Text>
                </View>
            );
        }
    }

    class WalletsScreen extends React.Component {
        static navigationOptions = {
            title: 'Wallet',

        };
        render() {
            return (
                <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                    <Text>Wallet Screen</Text> 
                </View>
            );
        }
    }

    const Tab = createBottomTabNavigator({ 

            Home: {
                screen: HomeScreen,
            },
            Wallet: {
                screen: WalletsScreen,
            },
            Settings: {
                screen: SettingsScreen,
            },  
        },
        {
          tabBarOptions:{
              tabStyle: {
                width: 100,
                backgroundColor: 'black',
              },
              labelStyle:{
                color: 'white',
              },
            }

        }
    );


    const RootStack = createStackNavigator({

        Home1: {
            screen: Tab,

        },

    });

    export { RootStack, Tab}

Answer 1

activeTintColor是tabBarOptions对象的属性，您正在navigationOptions中使用它。

const Tab = createBottomTabNavigator({ 
////Screens,
        {
          tabBarOptions:{
              activeTintColor: 'blue',
              tabStyle: {
                width: 100,
                backgroundColor: 'black',
              },
              labelStyle:{
                color: 'white',
              },
            }

        }
    );

为什么“ activeTintColor”在我的应用程序中不起作用？

1 个答案: