覆盖导航栏标题答案

【问题标题】：Override navigation bar title覆盖导航栏标题
【发布时间】：2018-08-02 17:56:52
【问题描述】：

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

堆栈导航器

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

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

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

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

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

另外值得一提的是我正在使用 redux。

【问题讨论】：

标签： reactjs react-native react-redux react-navigation

【解决方案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'
    });
  }

【讨论】：

静态导航选项 = ({ 导航 }) => { })}
componentDidMount() { this.props.navigation.setParams({ headerTitle: '新标题' }); }

【解决方案2】：

你可以试试这个： 堆栈导航器

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

HomeScreen 在您的 homeScreen 中检查您是否有动态标题，如果没有将标题设置为“主页”，但如果存在则将其设置为动态标题。

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

【讨论】：