在 React Native 应用程序中向下滑动并刷新常规视图

Question

有没有办法在不使用 FlatList 或 ScrollView 之类的东西的情况下，在常规视图上向下滑动以刷新 React Native？

Answer 1

没有 built-in 解决方案可以做到这一点。我们通常希望为用户提供某种反馈，因此常规 pull to refresh 操作是一个合适的选择，这显然只适用于某种 scrollable container.

但是，如果我们仍然不想为此目的使用 ScrollView，那么我们可以听触摸手势并在某个阈值后做出如下反应。

const SomeRefreshableNonScrollableComponent = (props) => {
   const y = useRef()

   function onRefresh() {
        // refresh or whatever
   }

   return (
    <View
      style={{flex :1}}
      onTouchStart={e=> y.current = e.nativeEvent.pageY}
      onTouchEnd={e => {
        // some threshold. add whatever suits you
        if (y.current - e.nativeEvent.pageY < 40) {
          onRefresh()
        }
      }}>

     ...

    </View>
  )
}

编辑： 作为对评论的回答。

我们可以为嵌套在不可滚动的 ScrollView 中的 FlatList 实现下拉刷新机制，如下所示。

const [data, setData] = useState([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
  const [refresh, setRefresh] = useState(false)

  useEffect(() => {

    if (refresh) {
      console.log("Refresh my inner data on pull")
    }
  }, [refresh])

  return (
    <ScrollView scrollEnabled={false} nestedScrollEnabled={true}>
      <FlatList refreshing={refresh} onRefresh={() => setRefresh(true)} data={data} renderItem={({item}) => {
        return <Text>Hello world</Text>
      }} />
    </ScrollView>
  );
};

请注意，刷新操作完成后，您必须将 refresh 状态重置回 false，例如如果 API 调用 returns 其数据。否则，Flatlist 将一直显示刷新指示器。

在 React Native 应用程序中向下滑动并刷新常规视图

Swipe down do refresh on regular View in react native app

javascript

swiperefreshlayout

react-native