Question

下面是我的组件在我的RN应用程序中的对齐方式

  <View>
    <ScrollView>
      <BannerContainer />
      <CampaignContainer />
      <BrandContainer />
      <Infographic />
      <Seo />
    </ScrollView>
    <BackToTop onTap={this.onBackToTopTap} />
  </View>

在ScrollView下的每个子元素的componentDidMount中，我调度异步操作。例如

const { dispatch } = this.props
    dispatch(fetchBanners())

现在我要做的是在我的App.js中添加RefreshControl，就像这样

<View>
    <ScrollView ref="scrollView" refreshControl={
      <RefreshControl
        refreshing={this.state.refreshing}
        onRefresh={this._onRefresh.bind(this)}
      />
    }>
      <BannerContainer />
      <CampaignContainer />
      <BrandContainer />
      <Infographic />
      <Seo />
    </ScrollView>
    <BackToTop onTap={this.onBackToTopTap} />
  </View>

我想知道如何重新加载页面，即在_onRefresh函数中调用每个子元素的componentDidMount，以便再次加载所有数据？

Answer 1

您可以尝试这个。.

_onRefresh() {
  this.setState({ refreshing: true });
  setTimeout(() => {
    this.setState({ refreshing: false });
  }, 1000);
}

..，然后在ScrollView中将组件置于这种情况下。当您拉动刷新时，随着刷新状态的改变，这将导致重新渲染。

{!this.state.refreshing && [
  <BannerContainer />,
  <CampaignContainer />,
  <BrandContainer />,
  <Infographic />,
  <Seo />
]}

注意：不要忘记为数组中的每个组件提供键

如何使用RN中的RefreshControl在刷新时重新渲染子项？

1 个答案: