react-native - 为什么 React Native FlatList 不能在 Android 上运行,但它适用于 Web?
问题描述
我正在使用 Expo 为后端构建一个带有 AWS 的反应原生应用程序。
我正在尝试使用 FlatList 和 AWS 数据显示朋友列表。该列表有效并且在我的网络浏览器上可见,但由于某种原因,它没有显示在我的 Android 手机上。问题可能是什么?
好友列表.tsx
import { API, graphqlOperation } from 'aws-amplify';
import * as React from 'react';
import {useEffect, useState} from 'react';
import { FlatList, View, ScrollView, Text, StyleSheet } from 'react-native';
import { listUsers } from '../graphql/queries';
import FriendsListItem from '../components/FriendsListItem';
export default function FriendsList() {
const [ users, setUsers ] = useState([]);
useEffect( () => {
const fetchUsers = async () => {
try {
const usersData = await API.graphql(
graphqlOperation(
listUsers
)
)
setUsers(usersData.data.listUsers.items);
} catch (e) {
}
}
fetchUsers();
},[])
return (
<View style={ styles.container }>
<FlatList
style={{ width: '100%' }}
data={users}
renderItem={({ item }) => <FriendsListItem user={item} />}
keyExtractor={(item) => item.id}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});
FriendsListItem.tsx
import * as React from 'react';
import { View, Text, StyleSheet, Image, TouchableWithoutFeedback } from 'react-native';
import { API, graphqlOperation, Auth } from "aws-amplify";
import { User } from './types';
export type FriendsListItemProps = {
user: User;
}
const FriendsListItem = ( props: FriendsListItemProps ) => {
const { user } = props;
return (
<TouchableWithoutFeedback>
<View style={styles.container}>
<View style={styles.lefContainer}>
<Image source={{ uri: user.imageUri }} style={styles.avatar}/>
<View style={styles.midContainer}>
<Text style={styles.username}>{user.name}</Text>
<Text numberOfLines={2} style={styles.status}>{user.email}</Text>
</View>
</View>
</View>
</TouchableWithoutFeedback>
);
}
export default FriendsListItem;
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
width: "100%",
justifyContent: 'space-between',
//height: '100%',
},
lefContainer: {
flexDirection: 'row',
padding: 16,
},
midContainer: {
justifyContent: 'space-around'
},
avatar: {
width: 60,
height: 60,
borderRadius: 50,
marginRight: 15,
},
username: {
fontWeight: 'bold',
fontSize: 16,
},
status: {
fontSize: 16,
color: 'grey',
},
});
解决方案
查看代码示例,在您的 FriendsListItem 组件中,每当您使用“用户”道具时,都需要更改它。例如,改变这个:
user.imageUri
对此:
user.item.imageUri
您传入的是一个对象(例如用户),然后它包含另一个对象(例如项目),它最终包含您的数据(例如 imageUri)。
推荐阅读
- vba - 将多个值与单个值传递到多值参数时的列可见性 - SSRS/Visual Studio
- spring - Spring 5.2.x 到 5.3.x 升级导致 Wildlfy 20 下 Quartz Jobs 出现 ClassNotFoundException
- python - 使用自定义重采样方法重采样栅格(python / gdal)
- javascript - 有没有办法在 bootstrap-datetimepicker 中禁用月份/视图模式按钮?
- unity3d - Holographic Remoting 在播放模式下因 XRInputSubsystem 错误而中断
- jenkins - 运行 testcafe 和 browserstack 时出现“无法建立一个或多个指定的浏览器连接”
- python - 使用 xmltodict 解析器对 json api 进行编码
- visual-studio-code - RT-Thread MicroPython 同步按钮消失了
- python - 无法移动到硒中的下一页
- postgresql - 无法使用“gist_ltree_ops(siglen=100)”在 EF Core 代码优先方法中设置签名强度