React-Native，Dynamic ReactNavigation标题

Question

我有一个屏幕，它的标题应该从AsyncStorage设置，并且很多屏幕都会导航到此屏幕（所以我不希望在我导航的任何地方传递标题）

由于navigationOptions为static，我无法使用this.state，也无法通过阅读{{1}来设置其标题（因为AsyncStorage是异步：）

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

Answer 1

您可以使用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 */
}