0

我正在使用 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',
        },
});
4

2 回答 2

0

查看代码示例，在您的 FriendsListItem 组件中，每当您使用“用户”道具时，都需要更改它。例如，改变这个：

user.imageUri

对此：

user.item.imageUri

您传入的是一个对象（例如用户），然后它包含另一个对象（例如项目），它最终包含您的数据（例如 imageUri）。

于 2020-11-23T21:55:39.387 回答
0

我想到了。原来我只是个白痴。我手机上的 expo 应用程序已登录到另一个帐户，因此它没有为该用户显示任何朋友。

于 2020-11-24T16:08:42.673 回答