反应-本机、动态反应导航标题 [英] React-Native, Dynamic ReactNavigation title

问题描述

我有一个屏幕，其标题应从AsyncStorage设置，并且许多屏幕都导航到此屏幕(因此我不希望将标题传递到我正在导航的任何地方)。

因为navigationOptions是static我无法使用this.state，也无法通过读取AsyncStorage来设置其标题(因为AsyncStorage是异步：)

在这种情况下如何更改屏幕内部的标题？

推荐答案

可以在异步函数结束后使用setParams导航操作设置标题。

示例

class SomeScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    const { params } = navigation.state;

    return {
      title: params ? params.screenTitle: 'Default Screen Title',
    }
  };

  componentDidMount() {
    AsyncStorage.getItem('someValueToGet').then((value) => {
      this.props.navigation.setParams({screenTitle: value})
    });
  }

  // OR You can wait for the someValueToGet

  async componentDidMount() {
    const value = await AsyncStorage.getItem('someValueToGet');
    this.props.navigation.setParams({screenTitle: value})
  }

  /* render function, etc */
}

这篇关于反应-本机、动态反应导航标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！