Как сделать так, чтобы this.forceUpdate () применялся ко всему приложению в React Native?

Question

У меня есть приложение React Native, в котором я хочу разместить кнопку, которая появляется на каждом экране, на которую пользователь может нажать, чтобы вызвать повторную визуализацию (используя this.forceUpdate()).На каждом экране у меня есть пользовательский компонент <Header> вверху, и я хочу поместить кнопку повторного рендеринга в этот заголовок, так как он появляется на каждом экране, и поэтому я должен добавить кнопку только один раз.

Итак, один из моих экранов будет выглядеть так:

export default class Screen1 extends Component {
  render() {
    return(
      <View>
        <Header>
        ...rest of screen...
      </View>
    )
  }
}

И Header выглядит так

export default class Header extends Component {
  render(){
    return(
      <View>
        <TouchableOpacity
          onPress={() => this.forceUpdate()}
        />
      </View>
    )
  }
}

Нажатие <TouchableOpacity> в заголовке вызывает заголовокСам обновлять, но не весь экран.Я предполагаю, что this.forceUpdate() применяется только к компоненту, в котором определен <TouchableOpacity>.Итак, мой вопрос: есть ли какой-нибудь эквивалент this.forceUpdate(), который я могу вызвать в своем заголовке, который вызовет повторную визуализацию всего экрана?

Спасибо!

Answer 1

Как @parohy предположил, что это не тот путь ... вообще.
Но есть временный хак, который вы можете передать this.forceUpdate() в качестве реквизита для заголовка.
будет выглядеть так:

 export default class Screen1 extends Component {
  render() {
    return(
      <View>
        <Header forceUpdate={this.forceUpdate}>
        ...rest of screen...
      </View>
    )
  }
}
export default class Header extends Component {
  render(){
    return(
      <View>
        <TouchableOpacity
          onPress={() => this.props.forceUpdate()}
        />
      </View>
    )
  }
}