如何在React Native刷新控件中缩短下拉刷新的距离(阈值)?

huangapple go评论83阅读模式
英文:

How do I shorten the pull to refresh distance (threshold) in React Native Refresh Control

问题

我正在尝试使用ScrollView中的Refresh Control来实现下拉刷新。我需要修改刷新控件的拉动距离/阈值。我已经检查了相关的属性来实现这一点,但我找不到任何与此相关的属性。

<ScrollView
  contentContainerStyle={styles.subContainer}
  bounces={true}
  horizontal={false}
  refreshControl={
    <RefreshControl
      refreshing={false}
      tintColor={'transparent'}
      onRefresh={() => {
        onSwipeDown();
      }}
    />
  }
>
  {props.children}
</ScrollView>
英文:

I am trying to implement pull to refresh using Refresh Control in ScrollView. I need to modify the pulling distance/threshold of refresh control. I have checked for the related props to achieve it, but I can't any props related to this.

&lt;ScrollView
          contentContainerStyle={styles.subContainer}
          bounces={true}
		  horizontal={false}
          refreshControl={
            &lt;RefreshControl
              refreshing={false}
              tintColor={&#39;transparent&#39;}
              onRefresh={() =&gt; {
                onSwipeDown();
              }}
            /&gt;
          }
        &gt;
          {props.children}
&lt;/ScrollView&gt;

Please help me guys.

答案1

得分: 1

我们可以通过onScroll事件监听器来实现这个功能。

<ScrollView
  contentContainerStyle={styles.subContainer}
  bounces={true}
  horizontal={false}
  onScroll={onSwipeDown}
>
 {props.children}
</ScrollView>

onSwipeDown方法

const onSwipeDown = event => {
  console.log(event.nativeEvent.contentOffset.y);
  if (event.nativeEvent.contentOffset.y < 0) { // 你可以用需要的阈值来替代零
    onRefresh(); // 你的刷新函数
  }
};
英文:

We can achieve this by onScroll event listener.

  &lt;ScrollView
    contentContainerStyle={styles.subContainer}
    bounces={true}
    horizontal={false}
    onScroll={onSwipeDown}
  &gt;
   {props.children}
  &lt;/ScrollView&gt;

onSwipeDown method

 const onSwipeDown = event =&gt; {
    console.log(event.nativeEvent.contentOffset.y);
    if (event.nativeEvent.contentOffset.y &lt; 0) { // you can replace zero with needed threshold
      onRefresh(); //your refresh function
    }
  };

</details>



huangapple
  • 本文由 发表于 2020年1月3日 14:15:15
  • 转载请务必保留本文链接:https://go.coder-hub.com/59573998.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定