当 React Native IOS App 中的 FlatList 为空时，ListEmptyComponent 不显示消息答案

【问题标题】：ListEmptyComponent not showing message when the FlatList is empty in React Native IOS App当 React Native IOS App 中的 FlatList 为空时，ListEmptyComponent 不显示消息
【发布时间】：2022-01-14 21:15:23
【问题描述】：

我正在使用 React Native 开发 Iphone 应用程序。我想通过 FlatList 显示文件夹。对于用户，他们分配了特定的文件夹，其中包含来自 Google Cloud Platform 的图像。我正在为用户正确获取文件夹，但是当用户没有特定文件夹时，我希望将消息显示为“没有可用的文件夹”。我使用 ListEmptyComponent 来呈现消息。下面是代码：

下载Page.js：

import React,{useEffect,useState} from 'react';
import { View, StyleSheet,SafeAreaView,TouchableOpacity,Image,FlatList,Text} from 
'react-native';
import { useSelector,useDispatch } from 'react-redux';
import AsyncStorage  from '@react-native-community/async-storage';
import * as authActions from "../../store/actions/auth";
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import HeaderButton from '../../components/UI/HeaderButton'; 

const DownloadPage = (props) =>{
const student = useSelector(state => state.auth.availableDevice);
const dispatch = useDispatch(); 

const renderEmptyContainer = () =>{
<View style={styles.MainContainer}>
<View style={styles.emptyTextDisplayView}>
<Text style={styles.emptyTextDisplay}>No Folders to display</Text>
</View>
</View>
 }

useEffect(() => {
const onScreenLoad = async () => {
    const useridfordevices = await
        AsyncStorage.getItem("userDatauserid");
    const obj = JSON.parse(useridfordevices);
    const {userid} = obj;
    var userid1 = userid[0];
    await dispatch(authActions.getFolderInfo(userid1))
  };
onScreenLoad();
}, [dispatch]);
return(  
<SafeAreaView style={styles.MainContainer}>
  <View style={styles.container}>
  <FlatList data={student}
    horizontal={false}
    numColumns={2}
    ListEmptyComponent={renderEmptyContainer()} //**Not working!!!**
  keyExtractor={item => item.index}
  renderItem={itemData => (
    <View style={styles.folderview}>
    <TouchableOpacity
      activeOpacity={0.5}
      onPress={()=>props.navigation.navigate('FolderImagePage',{
        foldername: itemData.item.TargetName,
      })}
      >
       <Image
    style={styles.tinyLogo}
    source={require('../../assets/foldericon.png')}
  />
  
  <View style={styles.textView}>
  <Text style={styles.targettext}>{itemData.item.TargetName}</Text></View>
      </TouchableOpacity>
      </View>
  )}
 /> 
   
 </View>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
MainContainer :{
flex:1,
},
folderview: {
width:190,
height:200, 
margin: 7,
borderRadius : 7 
},

textView: {
bottom:'9%',
width:'50%', 
textAlignVertical:'center',
padding:10,
color: '#000',
left:'7%'

 },
 targettext:{
 fontSize:15,
 fontWeight:'bold',
 },
 emptyTextDisplay:{
 fontWeight:'bold',
 fontSize:25
 },
 emptyTextDisplayView:{
 alignSelf:'center',
 top:'60%'.              **Trying to search the text if hidden**
 }
 });

  DownloadPage.navigationOptions = navData =>{
 return{
 headerTitle: 'Back',
 headerTitleStyle:{
   color:'white',
   
 },
 headerTitleAlign:"left",
 headerStyle: {
  backgroundColor: '#0437F2',
  
},
headerLeft: () =>
  <HeaderButtons HeaderButtonComponent={HeaderButton}>
    <Item
      iconName={'chevron-back-outline'}
      onPress={() => {  
       navData.navigation.navigate('Home');
      }}
    />
  </HeaderButtons>
   }
   }
   export default DownloadPage;

如果用户没有分配文件夹，当我运行此代码时，我会出现空白屏幕。谁能告诉我哪里出错了。提前谢谢。

【问题讨论】：

标签： react-native expo flatlist

【解决方案1】：

尝试一些事情

将renderEmptyContainer 重命名为RenderEmptyContainer 然后替换

ListEmptyComponent={renderEmptyContainer()} 带有组件签名

ListEmptyComponent={<RenderEmptyContainer />}

确保student 列表为空。尝试调试只是添加一个空数组<FlatList data={[]}
制作另一个屏幕来测试 RenderEmptyContainer。

【讨论】：

【解决方案2】：

这是我的错，我忘了在 RenderEmptyContainer 函数中添加返回。现在一切顺利。在下面找到 RenderEmptyContainer 代码：

  const RenderEmptyContainer = () =>{
  return(
  <View style={styles.MainContainer}>
  <View style={styles.emptyTextDisplayView}>
  <Text style={styles.emptyTextDisplay}>No Devices to display</Text>
  </View>
  </View>
  )
  }

【讨论】：