如何实现 Activity 指示器进行渲染，直到显示平面列表数据？反应原生

Posted 2023-02-16

【中文标题】如何实现 Activity 指示器进行渲染，直到显示平面列表数据？反应原生

【英文标题】：How to implement Activity indicator to render until flat list data is displayed? React Native

【发布时间】：2022-01-13 16:19:00

【问题描述】：

我有一个包含一些硬编码数据的平面列表。如何实现 Activity 指示器旋转并显示，直到平面列表数据完全显示在屏幕上？下面是我的代码。谢谢

import React, useState from 'react';
import  View, FlatList, TouchableOpacity, ActivityIndicator  from 'react-native';

import  MainScreenCard  from '../mainScreen.components/mainScreen.card';
import  Spacer  from '../assets.driveAround/spacer';

export const MainScreen = (navigation) => 
  
  return(
    <>
  <FlatList
      data=[
         name: 1 ,
         name: 2 ,
         name: 3 ,
         name: 4 
      ]
      renderItem=() => (
        <TouchableOpacity onPress=() => navigation.navigate("Login")>
        <Spacer position="bottom" size="large">
          <MainScreenCard/>
        </Spacer>
        </TouchableOpacity>
      )
      keyExtractor=(item) => item.name
      contentContainerStyle= padding: 16 
    />
    </>
);

【参考方案1】：

根据您要刷新的方式，有两个主要选项。如果您想从屏幕顶部拉出刷新，请提供刷新控件 https://reactnative.dev/docs/refreshcontrol

      <ScrollView
        contentContainerStyle=styles.scrollView
        refreshControl=
          <RefreshControl
            refreshing=refreshing
            onRefresh=onRefresh
          />
        
      >
        <Text>Pull down to see RefreshControl indicator</Text>
      </ScrollView>

否则，另一个简单的选择是使用 ActivityIndi​​cator 在视图上方显示微调器 https://reactnative.dev/docs/activityindicator

const [loading, setLoading] = useState(false)

...

<ActivityIndicator size="large" color="#00ff00" animating=loading/>

【讨论】：

您好，感谢您的回答。但是我不确定拉刷新是否在平面列表中工作。我实现了示例代码，但什么也没发生。您能否提供 如何在上面的代码中实现的具体示例？我如何设置加载？谢谢

查看 React Native 文档链接以获得更好的视图示例，但这只是您放置在 JSX 中的一个简单组件。并将加载替换为您将使用的任何变量来跟踪微调器是否应该显示。如果你登录到某个东西，请在开始时调用 setLoading