當ReactNativeIOS應用程式中的FlatList為空時，ListEmptyComponent不顯示訊息

我正在使用 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;

如果用戶沒有分配檔案夾，當我運行此代碼時，我會看到空白螢屏。誰能說我哪里出錯了。提前致謝。

uj5u.com熱心網友回復：

一些嘗試

1. 重命名renderEmptyContainer為RenderEmptyContainer 然后替換

ListEmptyComponent={renderEmptyContainer()} 帶有組件簽名

ListEmptyComponent={<RenderEmptyContainer />}

2. 確保student串列為空。嘗試除錯只是為了添加一個空陣列<FlatList data={[]}
3. 制作另一個螢屏來測驗您的 RenderEmptyContainer。

uj5u.com熱心網友回復：

這是我的錯，我忘了在 RenderEmptyContainer 函式中添加 return。現在一切都很好。找到下面的 RenderEmptyContainer 代碼：

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

標籤：反应原生 世博会 平单

上一篇：在本機反應中以不同的延遲定期呼叫多個函式函式

下一篇：使用Form.RangeonChange更改狀態