Блог

Главная - Вопросы по программированию - ListEmptyКомпонент не показывает сообщение, когда плоский список пуст в приложении React Native IOS

ListEmptyКомпонент не показывает сообщение, когда плоский список пуст в приложении React Native IOS

#react-native #expo #flatlist

Вопрос:

Я разрабатываю приложение для Iphone с использованием React Native.Я хочу отображать папки через плоский список.Для пользователя им назначены определенные папки, в которых есть изображения с облачной платформы Google. Я правильно получаю папки для пользователя, но когда у пользователя нет определенных папок, я хочу, чтобы сообщение отображалось как «Папки недоступны».Я использовал ListEmptyКомпонент для отображения сообщения.Ниже приведен код:

DownloadPage.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) =gt;{ const student = useSelector(state =gt; state.auth.availableDevice); const dispatch = useDispatch();   const renderEmptyContainer = () =gt;{ lt;View style={styles.MainContainer}gt; lt;View style={styles.emptyTextDisplayView}gt; lt;Text style={styles.emptyTextDisplay}gt;No Folders to displaylt;/Textgt; lt;/Viewgt; lt;/Viewgt;  }  useEffect(() =gt; { const onScreenLoad = async () =gt; {  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(  lt;SafeAreaView style={styles.MainContainer}gt;  lt;View style={styles.container}gt;  lt;FlatList data={student}  horizontal={false}  numColumns={2}  ListEmptyComponent={renderEmptyContainer()} //**Not working!!!**  keyExtractor={item =gt; item.index}  renderItem={itemData =gt; (  lt;View style={styles.folderview}gt;  lt;TouchableOpacity  activeOpacity={0.5}  onPress={()=gt;props.navigation.navigate('FolderImagePage',{  foldername: itemData.item.TargetName,  })}  gt;  lt;Image  style={styles.tinyLogo}  source={require('../../assets/foldericon.png')}  /gt;    lt;View style={styles.textView}gt;  lt;Text style={styles.targettext}gt;{itemData.item.TargetName}lt;/Textgt;lt;/Viewgt;  lt;/TouchableOpacitygt;  lt;/Viewgt;  )}  /gt;     lt;/Viewgt; lt;/SafeAreaViewgt; ) } 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 =gt;{  return{  headerTitle: 'Back',  headerTitleStyle:{  color:'white',    },  headerTitleAlign:"left",  headerStyle: {  backgroundColor: '#0437F2',   }, headerLeft: () =gt;  lt;HeaderButtons HeaderButtonComponent={HeaderButton}gt;  lt;Item  iconName={'chevron-back-outline'}  onPress={() =gt; {   navData.navigation.navigate('Home');  }}  /gt;  lt;/HeaderButtonsgt;  }  }  export default DownloadPage;

Если пользователю не назначена папка,при запуске этого кода я получаю пустой экран.Может ли кто-нибудь сказать, где я ошибаюсь.заранее спасибо.

Ответ №1:

Несколько вещей, которые нужно попробовать

  1. Переименовать renderEmptyContainer в RenderEmptyContainer И затем заменить

ListEmptyComponent={renderEmptyContainer()} с подписью компонента

ListEmptyComponent={lt;RenderEmptyContainer /gt;}

  1. Убедитесь, что student список пуст. Попробуйте для отладки просто добавить пустой массив lt;FlatList data={[]}
  2. Создайте еще один экран, на котором вы проверяете свой модуль визуализации.

Ответ №2:

Это было плохо,я забыл добавить возврат в функцию RenderEmptyContainer.А теперь все хорошо идет.Найдите код RenderEmptyContainer ниже:

 const RenderEmptyContainer = () =gt;{  return(  lt;View style={styles.MainContainer}gt;  lt;View style={styles.emptyTextDisplayView}gt;  lt;Text style={styles.emptyTextDisplay}gt;No Devices to displaylt;/Textgt;  lt;/Viewgt;  lt;/Viewgt;  )  }
Метки: ,