如何動態更新react-navigation標簽導航器的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

將變量傳遞給您的孩子。

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

---

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

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

Answer 2

您可以使用屏幕中的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>
    );
  }
}

演示版