react-native - React Native FlatList not Rendering items bug
问题描述
嗨,我试图在我的 react 本机页面中呈现一些用户信息,但我不知道为什么它应该呈现如下内容:
但我的输出是
用户数据
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>
)
};
解决方案
好像你使用了错误的版本,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>
);
}
链接在这里
对于应该更新react-native-element
version 3
为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';
// 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,
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>
);
}
链接在这里
推荐阅读
- r - R qplot 错误消息:形状调色板最多可以处理 6 个离散值,因为超过 6 个变得难以区分
- python - 如何修复我的滑块?它没有按预期工作
- python - 在文本文件的行中查找位置
- javascript - JSON / JavaScript - 找到匹配的值,将它们变成键并创建新的合并对象
- javascript - 使用 JS 通过 API 发送多级表单数据
- python - 如何在 Django admin 中更改过滤器面板宽度
- python - 如何从数据框的列创建动画折线图?
- javascript - 为什么 chrome 控制台在 {} + {} 和 {} + {} 之间给出不同的结果;
- python - 从 zonal_stats 我得到这个错误: ValueError: width and height must be > 0
- javascript - SyntaxError: await 仅在我的代码中的异步函数中有效