如何解决React Native FlatList 不呈现项目错误
嗨,我试图在我的本机页面中呈现一些用户信息,但我不知道为什么它应该呈现如下内容:
但我的输出是
用户数据
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>
)
};
解决方法
在导入的顶部写,
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>
);
,
似乎您为 react-native-elements
使用了错误版本的 version 2
,您应该按如下方式更新 code
import * as React from 'react';
import { Text,View,StyleSheet,FlatList } from 'react-native';
import Constants from 'expo-constants';
import { ListItem,Avatar,Button } from 'react-native-elements';
import Icon from 'react-native-vector-icons/FontAwesome';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
const getActions = (user) => {
return (
<>
<Button icon={<Icon name="edit" size={25} color="orange" />} />
</>
);
};
const UserItem = ({ item }) =>(
<ListItem
leftAvatar={{ rounded: true,source: { uri: item.avatarUrl } }}
title={item.name}
subtitle={item.email}
rightElement={getActions(item)}
/>
);
export default function App() {
return (
<View
style={{
flex: 1,}}>
<FlatList
data={[
{
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',]}
renderItem={({ item,index }) => <UserItem item={item} />}
/>
</View>
);
}
链接here
对于 react-native-element
version 3
,code
应该更新为
import * as React from 'react';
import {
Text,FlatList,} from 'react-native';
import Constants from 'expo-constants';
import { ListItem,Button } from 'react-native-elements'
import Icon from 'react-native-vector-icons/FontAwesome';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
const getActions = (user) => {
return (
<>
<Button
icon={<Icon name='edit' size={25} color='orange' />}
/>
</>
)
}
const UserItem = ({ item }) => {
return (
<ListItem>
<Avatar source={{uri: item.avatarUrl}} rounded />
<ListItem.Content>
<ListItem.Title>{item.name}</ListItem.Title>
<ListItem.Subtitle>{item.email}</ListItem.Subtitle>
</ListItem.Content>
<View>
{getActions(item)}
</View>
</ListItem>
);
};
export default function App() {
return (
<View
style={{
flex: 1
}}>
<FlatList
data={[
{
id: 1,index }) => <UserItem item={item} />}
/>
</View>
);
}
链接here
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。