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

您如何使this.forceUpdate（）应用于React Native中的整个应用程序？

1 个答案: