如何在本机反应中将 ActivityIndi​​cator 与 FlatList 一起使用？

Question

我有一个 FlatList 组件，它具有使用 RefreshControl 处理刷新的 refreshControl 属性。我如何在这里使用 ActivityIndi​​cator 而不是 RefreshControl。

 return (


        <View style={styles.container}>

            <FlatList
                data={data}
                renderItem={({ item }) => {
                    return renderData(item)

                }}
                refreshControl={<RefreshControl
                    colors={["#9Bd35A", "#689F38"]}
                    refreshing={loading}
                    onRefresh={loadData()} />}

                keyExtractor={item => `${item.id}`}



            />
            <FAB
                style={styles.fab}
                small={false}
                icon="plus"
                onPress={() => navigation.navigate('Create')}

            />
        </View>
    )
}

Answer 1

<Flatlist 
 data={data}
 renderItem={({ item }) => {return renderData(item)}}
 ListEmptyComponent={()=>{
 if(loading){
 return <ActivityIndicator animating size="large" color="red" />
 }
 return <Text>data is empty</Text>
 }}
 refreshControl={<RefreshControl
                    colors={["#9Bd35A", "#689F38"]}
                    refreshing={loading}
                    progressViewOffset={loading?-200:0} 
                    onRefresh={()=>{
                     setData(null);
                     loadData()}} 
                  />}

/>