覆盖导航栏标题

Question

我想在导航发生后覆盖导航栏上的标题。

StackNavigator

const DashboardNavigator = new StackNavigator({
  Dashboard: {
    screen: HomeScreen,
    navigationOptions: {
      title: 'Home'
    }
  }
}, {
  navigationOptions
});

当我到达主页时，我基本上想将标题重命名为其他名称。我知道这很奇怪但需要处理动态标题。

这是我试过的（HomeScreen 独立组件）：

  componentDidMount() {
    this.props.navigation.setParams({
      navigationOptions: {
        title: 'New title'
      }
    });
  }

这没有什么不同。有什么建议么？

Also worth mentioning that I'm using redux.

Answer 1

在你的主屏幕上试试这个

主屏幕

    static navigationOptions = ({ navigation }) => {
        return {
          title: navigation.state.params.headerTitle,
          headerRight: (
            <Icon
              name="calendar"
              type="octicon"
              color="#fff"
            />
          ),
          headerLeft: (
            <Icon
              name="keyboard-arrow-left"
              color="#fff"
              onPress={() => navigation.goBack(null)}
            />
          ),
          headerStyle: {
            backgroundColor: "#000",
            paddingLeft: 10,
            paddingRight: 10
          },
          headerTitleStyle: { color: "#fff", alignSelf: "center" }
        };
      };

componentDidMount() {
    this.props.navigation.setParams({
        headerTitle: 'New title'
    });
  }

Answer 2

你可以试试这个： StackNavigator

const DashboardNavigator = new StackNavigator({
  Dashboard: {
    screen: HomeScreen,
  }
}, {
  navigationOptions
});

HomeScreen 在您的主屏幕中检查您是否有动态标题，如果没有则将标题设置为 "Home" 但如果存在则将其设置为您的动态标题。

   static navigationOptions = ({ navigation }) => ({
      title: navigation.state.params ==='undefined' || navigation.state.params.title === 'undefined' ? 'Home': navigation.state.params.title
   });

然后像这样设置动态标题：

componentDidMount() {
   this.props.navigation.setParams({ title: 'your new title' })
}

覆盖导航栏标题

Override navigation bar title

reactjs

react-native

react-redux

react-navigation