React Native，如何用FlatList实现pull刷新？

atmip9wb 于 2023-03-31 发布在 React

关注(0)|答案(2)|浏览(105)

下面是我的尝试：

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;

react-native

来源：https://stackoverflow.com/questions/71174792/react-native-how-to-implement-pull-to-refresh-with-flatlist

2条答案

按热度按时间

9vw9lbht1#

下面是在React Native中使用FlatList实现pull刷新的一种方法。我在代码中添加了注解：

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;

赞(0）回复(0）举报 2023-03-31

lymgl2op2#

你错过了React的基础知识。看看这个例子。
https://snack.expo.dev/@nazrdogan/233ac3

赞(0）回复(0）举报 2023-03-31