Реагировать Native FlatList с объектом

Question

Реагировать Native FlatList с объектом

1

Я хочу визуализировать объект с помощью React Native FlatiList, но этот компонент не возвращает ожидаемый результат. Мой словарь такой:

Object {
  "Lisa.Sky": Object {
    "name": "Lisa",
    "surname": "Sky",
    "age": 21,
    "sex": female
  },  
  "Thomas.Prat": Object {
    "name": "Thomas",
    "surname": "Prat",
    "age": 33,
    "sex": male
  },  
  "Paul.Sing": Object {
    "name": "Paul",
    "surname": "Sing",
    "age": 88,
    "sex": male
  },
  "Andrew.Brown": Object {
    "name": "Andrew",
    "surname": "Brown",
    "age": 23,
    "sex": male
  },
}

Я реализовал FlatList, как это, но у меня белый экран

   <View>
       <ScrollView>
           <FlatList
                data={this.props.nameList}
                renderItem={({item}) => 
                    <View key={item.name + "." + item.surname}>  
                        <Text style={styles.viewDetail}>{item.name}</Text>
                        <Text style={styles.viewDetail}>{item.surname}</Text>
                        <Text style={styles.viewDetail}>{item.age}</Text>
                        <Text style={styles.viewDetail}>{item.sex}</Text>
                    </View>
                }
                keyExtractor={(index) => index.toString()}
           />
       </ScrollView>
   </View>

Спасибо

zp26 11 янв. 2019, в 10:32

Источник

0

Каков результат вашего кода?
aseferov 11 янв. 2019, в 09:15
0

У меня белый экран. renderItem никогда не вызывается
zp26 11 янв. 2019, в 09:20

Теги:

javascript

react-native

react-native-flatlist

3 ответа

1

Согласно документации

Для простоты данные - это простой массив. Если вы хотите использовать что-то еще, например, неизменный список, используйте базовый

Попробуйте передать данные как массив, а не объект

aseferov 11 янв. 2019, в 07:08

0

Вам необходимо использовать ваши данные в виде массива (если вам нужно, вы можете проверить это по адресу https://facebook.github.io/react-native/docs/flatlist#data). Ваши данные могут быть примерно такими,

const nameList = [
    {
        "name": "Lisa",
        "surname": "Sky",
        "age": 21,
        "sex": female
    },
    {
        "name": "Thomas",
        "surname": "Prat",
        "age": 33,
        "sex": male
    },
    {
        "name": "Paul",
        "surname": "Sing",
        "age": 88,
        "sex": male
    },
    {
        "name": "Andrew",
        "surname": "Brown",
        "age": 23,
        "sex": male
    },
];

sdkcy 11 янв. 2019, в 08:09

Ещё вопросы

У меня белый экран. renderItem никогда не вызывается

Nazır Dogan · Accepted Answer · 2019-01-11T07-28-00.000Z

Вы можете сделать так проверьте рабочую закуску. https://snack.expo.io/@nazrdogan/bad-cashew

import * as React from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import { Constants } from 'expo';

// 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';
var obj = {
  'Lisa.Sky': {
    name: 'Lisa',
    surname: 'Sky',
    age: 21,
    sex: 'female',
  },
  'Thomas.Prat': {
    name: 'Thomas',
    surname: 'Prat',
    age: 33,
    sex: 'male',
  },
  'Paul.Sing': {
    name: 'Paul',
    surname: 'Sing',
    age: 88,
    sex: 'male',
  },
  'Andrew.Brown': {
    name: 'Andrew',
    surname: 'Brown',
    age: 23,
    sex: 'male',
  },
};
export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={Object.keys(obj)}
          renderItem={({ item }) => <Text>{obj[item].name}</Text>}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});