почему `activeTintColor` не работает в моем приложении?

Question

Я создал приложение, используя ReactNative, и я использую react-navigation для навигации по своему приложению.

Я пытаюсь добавить activeTintColor, чтобы активная вкладка получила уникальный цвет, но ничего не происходит. Текст остается белым.

Любая причина, почему это происходит?

Я просмотрел документы и следовал его инструкциям, но безрезультатно.

Кто-нибудь знает решение моей проблемы? (почему 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',
              },
            }

        }
    );