微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在React Native上的Flatlist中过滤数据

如何解决如何在React Native上的Flatlist中过滤数据

我一直在使用此应用程序,到目前为止,我设法从服务器上载和检索数据,但现在我正努力在Flatlist中显示数据。

 <View>
  <FlatList
   data={recibidos}
   style={styles.verTres}
   renderItem={({item}) => (
     <View>
     <Text style={styles.chatContent}>Mensaje: {item.mensaje}</Text>
     <Image source={{uri: 'http://api-url/'+item.mensaje}} style={styles.imageView}/>
     <Video source={{uri: 'http://api-url/'+item.mensaje}} style={styles.imageView}/>
     </View>                
    )}
   keyExtractor={item => item.mensaje}
   />
  </View>

因此,这是我编写的用于显示从服务器获得的响应的代码,其问题在于renderItem函数将所有内容均呈现为Text,Image和Video,并且看起来像这样。

Screenshot

Distance between responses

Uri text

所以我的问题是,如果仅对所有内容都使用一种形式,则如何将响应过滤为文本,视频或图像,如下所示:

对于文本

{"id":"112","nombre":null,"mensaje":"Hola","fecha":"2020-09-18
15:46:21","estado":"0"}

对于图像

{"id":"113","mensaje":"resource\/img_4820200918154854.logo_small","fecha":"2020-09-18
15:48:54","estado":"0"}

对于视频

{"id":"133","mensaje":"resource\/video_4820201001080513.","fecha":"2020-10-01
08:05:13","estado":"0"}

但是正如我提到的,响应仅来自一种方法

我试图在here中使用render {Item}中的if语句,但这没用。

如果您能给我任何帮助或建议,我将不胜感激

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。