与对象反应 Native FlatList

import * as React from 'react';import { Text, View, StyleSheet, FlatList } from 'react-native';从博览会"导入{常量}；//可以从本地文件导入从 './components/AssetExample' 导入 AssetExample；//或任何 npm 中可用的纯 JavaScript 模块从'react-native-paper'导入{卡片}；变量对象 = {'丽莎.天空':{name: '丽莎',姓氏:'天空'，年龄:21，性别:'女性'，},'托马斯.普拉特':{姓名: '托马斯',姓氏:'Prat',年龄:33，性别男'，},'Paul.Sing':{姓名:'保罗',姓氏:'唱',年龄:88，性别男'，},'安德鲁.布朗':{name: '安德鲁',姓氏:'布朗'，年龄:23​​，性别男'，},};导出默认类 App 扩展 React.Component {使成为() {返回 (<视图样式={styles.container}><平面列表数据={Object.keys(obj)}renderItem={({ item }) =><Text>{obj[item].name}</Text>}/></查看>);}}const 样式 = StyleSheet.create({容器: {弹性:1，justifyContent: '中心',paddingTop:Constants.statusBarHeight，背景颜色:'#ecf0f1'，填充:8，},});I want to render object with React Native's FlatiList but this component doesn't return the expected result.My dictionary is like this: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 },}I have implemented a FlatList like this, but I have white screen <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>Thanks 解决方案 you can do like this way.check working snack. https://snack.expo.io/@nazrdogan/bad-cashewimport * as React from 'react';import { Text, View, StyleSheet, FlatList } from 'react-native';import { Constants } from 'expo';// You can import from local filesimport AssetExample from './components/AssetExample';// or any pure javascript modules available in npmimport { 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, },}); 这篇关于与对象反应 Native FlatList的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！