如何在 React Native 中实现滑动刷新？

在本文中，我们将了解如何在 React Native 中使用向下滑动刷新功能。在向用户显示实时数据的应用程序中，例如加密值或食品订购应用程序中食品的可用性，用户可以在应用程序上垂直向下滑动以手动刷新来自服务器的数据。

我们将在 Scroll View 中使用RefreshControl组件来添加拉动刷新功能。

创建 React Native App 并安装模块：

• 第 1 步：打开终端并通过以下命令安装 expo-cli。

  npm install -g expo-cli

• 第2步：现在通过以下命令创建一个项目。

  expo init demo-app

• 第 3 步：现在进入您的项目文件夹，即 demo-app

  cd demo-app

项目结构：它将如下所示。

实现：在这个例子中，我们将在 ScrollView 中创建一个 Text 组件，当用户在应用程序上向下滑动时，它会改变它的颜色。当用户向下滑动时，会调用onRefresh函数，该函数将刷新受控道具变为true 。因此，用户现在可以看到一个加载图标，并且在 2000 毫秒（即 2 秒）之后，按钮的颜色变为绿色，并且刷新受控道具变为false 。这会阻止加载图标在函数执行后消失。

文件名：App.js

App.js

import React, {useState} from 'react';
import {ScrollView, StyleSheet, Text, 
   View, RefreshControl} from 'react-native';
  
const App = () => {
  const [color, changeColor] = useState('red');
  const [refreshing, setRefreshing] = React.useState(false);
  
  const onRefresh = () => {
    setRefreshing(true);
    setTimeout(() => {
      changeColor('green');
      setRefreshing(false);
    }, 2000);
  };
  return (
    
      }
      style={styles.container}>
      
        
          Swipe Down to Change Color !
        
      
    
  );
};
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});
  
export default App;

使用以下命令启动服务器。

npm run android

输出：如果你的模拟器没有自动打开，那么你需要手动打开。首先，去你的安卓工作室并运行模拟器。现在再次启动服务器。