React Native，如何用FlatList實現pull to refresh？

Question

這是我的嘗試：

import {View, Text, FlatList, Button} from 'react-native';
import React, {useState} from 'react';

const List = () => {
  const data = ['test1', 'test2', 'test3'];
  const [test, setTest] = useState(data);
  return (
    <View style={{alignItems: 'center'}}>
      <Text>List</Text>
      <FlatList
        data={data}
        numColumns={1}
        renderItem={({item, index}) => <Text>{item}</Text>}
        // onRefresh={}

        refreshing={false}
      />
      <Button title="addData" onPress={() => data.push('tset4')} />
      <Button title="show" onPress={() => console.log(data)} />
      <Button title="test" onPress={() => console.log(data)} />
    </View>
  );
};

export default List;

Answer 1

在這里你將如何實現它（我在代碼中添加了注釋）：

import {View, Text, FlatList, Button} from 'react-native';
import React, {useState, useEffect} from 'react';

const List = () => {
  const data = ['test1', 'test2', 'test3'];
  const [test, setTest] = useState(data);
  // set up this boolean state
  const [refreshing, setRefreshing] = useState(false);

  // set up this useEffect
  useEffect(()=>{
    if(refreshing){
     // do your heavy or asynchronous data fetching & update your state
     setTest([...test, "test4"]);
     // set the refreshing back to false
     setRefreshing(false);
    }
  },[refreshing])

  return (
    <View style={{alignItems: 'center'}}>
      <Text>List</Text>
      <FlatList
        data={data}
        numColumns={1}
        renderItem={({item, index}) => <Text>{item}</Text>}
        refreshing={refreshing}
        onRefresh={()=>setRefreshing(true)}
      />
      <Button title="addData" onPress={() => data.push('tset4')} />
      <Button title="show" onPress={() => console.log(data)} />
      <Button title="test" onPress={() => console.log(data)} />
    </View>
  );
};

export default List;

Answer 2

你缺少 React 的基礎知識。 檢查這個例子。

https://snack.expo.dev/@nazrdogan/233ac3