как динамически обновить activeTintColor для реагирующей навигационной вкладки-навигатора?

Question

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

const MyStack = createBottomTabNavigator({ ... }, {
  tabBarOptions: {
    activeTintColor: "green",
  }
});

class CustomNavigator extends React.Component {
  static router = MyStack.router;
  render() {
    const { navigation } = this.props;

    return <MyStack
      navigation={navigation}
      activeTintColor={"red"}
    />;
  }
}

цвет панели вкладок всегда "зеленый", и activeTintColor={"red"} не работает.Я также попробовал это (не работает тоже):

return <MyStack
          navigation={navigation}
          navigatorOptions={{
              tabBarOptions: {
                  activeTintColor: "red",
              }
          }}
        />

спасибо.

Answer 1

Вы можете перезаписать цвета с помощью navigationOptions на своих экранах.

class Home extends React.Component {
  static navigationOptions = {
    tabBarOptions: {
      activeTintColor: 'red', // overwrite the default green color
    },
  };

  render() {
    return (
      <View style={styles.container}>
        <Text>Home</Text>
      </View>
    );
  }
}

Демо

Answer 2

Передайте переменные вашему ребенку ..

const MyStack = createBottomTabNavigator({ ... }, {
  tabBarOptions: {[
    {
    activeTintColor: "green",
},
this.props.tabBarOptions
  ]}
});

---

class CustomNavigator extends React.Component {
  static router = MyStack.router;
  render() {

    return <MyStack
      activeTintColor={"red"}
    />;
  }
}