ListItem 不在 React Native 中呈现数据

Question

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

list

但我的输出是

list

所以我的 FlatList 可以正常工作，但我的 ListItem 没有呈现任何数据，有人可以帮助我吗？我不知道这是否是 reactnativeelements 的 bug

用户数据

export default [
{
    id: 1,
    name: 'Tiago Almeida',
    email: 'tiago@gmail.pt',
    avatarUrl:
        'https://cdn.pixabay.com/photo/2013/07/13/10/07/man-156584_960_720.png',
},
{
    id: 2,
    name: 'Lucas Silva',
    email: 'lucas@gmail.com',
    avatarUrl:
        'https://cdn.pixabay.com/photo/2014/04/03/10/32/businessman-310819_960_720.png',
},
{
    id: 3,
    name: 'Andre Ferreira',
    email: 'andre@gmail.pt',
    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>
    )
};

Answer 1

在导入的顶部写上，

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

ListItem 不在 React Native 中呈现数据

ListItem not rendering data in React native

react-native

react-native-elements