ListItem 未在 React Native 中呈现数据

问题描述

嗨，我试图在我的 React Native 页面中呈现一些用户信息，但我不知道为什么它应该呈现这样的内容：

list

但我的输出是

list

所以我的 FlatList 正在工作，但我的 ListItem 没有呈现任何有人可以帮助我的数据？ 我不知道是不是 reactnativeelements 的问题

用户数据

export default [
{
    id: 1,name: 'Tiago Almeida',email: '[e-mail]',avatarUrl:
        'https://cdn.pixabay.com/photo/2013/07/13/10/07/man-156584_960_720.png',},{
    id: 2,name: 'Lucas Silva',email: '[e-mail]',avatarUrl:
        'https://cdn.pixabay.com/photo/2014/04/03/10/32/businessman-310819_960_720.png',{
    id: 3,name: 'Andre Ferreira',email: '[e-mail]',avatarUrl:
        'https://cdn.pixabay.com/photo/2018/05/19/22/03/man-3414477_960_720.png',];

这是我的主页

export default props => {
    function getActions(user) {
        return (
            <>
                <Button
                    onPress={() => props.navigation.navigate('UserForm',user)}
                    type='clear'
                    icon={<Icon name='edit' size={25} color='orange' />}
                />
            </>
        )
    }

    function getUserItem({ item: user }) {
        return (
            <ListItem
                leftAvatar={{ source: { uri: user.avatarUrl } }}
                key={user.id}
                tittle={user.name}
                subtitle={user.email}
                bottomDivider
                rightElement={getActions(user)}
                onPress={() => props.navigation.navigate('UserForm',user)}


            />
        )

    }

    return (
        <View>
            <FlatList
                keyExtractor={user => user.id.toString()}
                data={users}
                renderItem={getUserItem}
            />
        </View>
    )
};

解决方法

在导入的顶部写，

import { ListItem,Avatar } from 'react-native-elements';

之后把你的代码改成这个

你不需要getActions

改为这样写，

 const getUserItem = ({ item: user }) => (
    <ListItem
      bottomDivider
      onPress={() => props.navigation.navigate('UserForm',user)}>
      <Avatar source={{ uri: user.avatarUrl }} />
      <ListItem.Content>
        <ListItem.Title>{user.name}</ListItem.Title>
        <ListItem.Subtitle>{user.email}</ListItem.Subtitle>
      </ListItem.Content>
      <ListItem.Chevron
        name="edit"
        size={25}
        color="orange"
        onPress={() => props.navigation.navigate('UserForm',user)}
      />
    </ListItem>
  );

  return (
    <View>
      <FlatList
        keyExtractor={(user) => user.id.toString()}
        data={users}
        renderItem={getUserItem}
      />
    </View>
  );

Working Example here