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

Posted 2023-02-19

【中文标题】当 React Native IOS App 中的 FlatList 为空时，ListEmptyComponent 不显示消息

【英文标题】：ListEmptyComponent not showing message when the FlatList is empty in React Native IOS App

【发布时间】：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;

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

【参考方案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>
  )