Блог

Главная - Вопросы по программированию - Почему React Native FlatList не работает на Android, но он предназначен для Web?

Почему React Native FlatList не работает на Android, но он предназначен для Web?

#react-native #react-native-flatlist #flatlist

#react-native #react-native-плоский список #плоский список

Вопрос:

Я использую Expo для создания приложения react native с 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',
    },
});

Список друзей.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',
        },
});

Комментарии:

1. сделайте предмет. идентификатор в string() . вы пробовали это?

2. Я попробовал, но это не сработало. Плоский список отображается в виде пустого поля. Я могу изменить его стиль (например, сделать цвет фона синим), но ни один из элементов не отображается. Он работает в веб-браузере, но не на Android.

3. приведенный ниже ответ — это ваш ответ, когда вы деструктурируете как элемент ({item})=> , который вы должны использовать item, а не user . или ({item:user})=>() сделайте это.

Ответ №1:

Глядя на пример кода, в вашем компоненте FriendsListItem каждый раз, когда вы используете свой «пользовательский» реквизит, вам нужно его изменить. Например, измените это:

 user.imageUri

к этому:

 user.item.imageUri

То, что вы передаете, — это объект (например, user), который затем содержит другой объект (например, item), который, наконец, содержит ваши данные (например, imageUri).

Ответ №2:

Я понял это. Оказывается, я просто идиот. Приложение expo на моем телефоне было зарегистрировано в другой учетной записи, поэтому оно не показывало друзей для этого пользователя.

Метки: ,