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>
    );
  }
}

Demo

如何动态更新react-navigation标签导航器的activeTintColor？

2 个答案: