react native 中的组件在 RefreshControl 中自行更新

Posted 2023-03-14

【中文标题】react native 中的组件在 RefreshControl 中自行更新

【英文标题】：component in react native gets updated itself in RefreshControl

【发布时间】：2021-04-13 21:58:56

【问题描述】：

所以我正在尝试在我的应用中实现拉动刷新功能。并且说我已经在我的android平台中成功实现了这个（在模拟器中）如果我下拉（通过鼠标）然后刷新指示器将保持可见直到我离开鼠标单击并且组件也不会更新直到鼠标单击.当我离开鼠标单击时，它将更新组件视图，刷新指示器将在 2 秒内隐藏。类似的事情在 ios 中并不完全按预期工作，所以当我拉下屏幕时，即使我没有左键单击，组件也会以某种方式更新。我已经给它一个谷歌搜索，但可能无法找到正确的搜索关键字。

下面是我的代码 sn-p。提前致谢。

render() 
const  loadingCart  = this.props;
return (
  <View style=styles.container>
    <ScrollView
      style=styles.scrollView
      contentContainerStyle=styles.contentContainer
      contentInsetAdjustmentBehavior="automatic"
      horizontal=false
      refreshControl=this._renderRefreshingControl()
    >
      this._renderProduct()
      loadingCart && this._renderLoadingCart()
    </ScrollView>
    this._renderCartButton()
    this._renderAddToCartPopover()
  </View>
);

_renderRefreshingControl = () => 
const  refreshing  = this.state;

return (
  <RefreshControl refreshing=refreshing onRefresh=this._handleRefreshingControlVisibility />
);

;

_handleRefreshingControlVisibility = async () => 
const  fetchProductByCode, navigation  = this.props;
this.setState(
  refreshing: true,
);

const resultAction = await fetchProductByCode('38186');

if (resultAction.type === PRODUCT_FETCH_SUCCESS || resultAction.type === PRODUCT_FETCH_FAILURE) 
  this.setState(
    refreshing: false,
  );
;

;

我希望我能够澄清我的问题 :-)

【参考方案1】：

试试这个：

_handleRefreshingControlVisibility = () => 
    this.setState( refreshing: true );

    setTimeout(function() 
        // here do what you want
    , 1500);
;

【参考方案2】：

所以RefreshControl 按预期工作，我的渲染方法中有一个loading 标志，不知何故，当refreshing 在this.setState( refreshing: true, ) 中设置为true 时，它​​会设置为false 最终删除加载标志解决了我的问题。