React-Native, Динамическое название ReactNavigation

Question

У меня есть экран, для которого его заголовок должен быть установлен из AsyncStorage, и многие экраны переходят на этот экран (поэтому я не хочу передавать заголовок везде, где я перемещаюсь).

Поскольку navigationOptions равно static Я не могу использовать this.state, а также не могу установить его заголовок, читая из AsyncStorage (потому что AsyncStorage равно Async :)

Как в такой ситуации изменить заголовок внутри самого экрана?

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 */
}