我想用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>
谢谢
答案 0 :(得分:4)
您可以这样操作。 检查工作小吃。 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,
},
});
答案 1 :(得分:1)
根据文档
为简单起见,数据只是一个纯数组。如果要使用 其他东西,如不可变列表,则使用基础
尝试将数据作为数组而不是对象传递
答案 2 :(得分:1)
我上了这篇老文章,因为我用谷歌搜索了“ flatlist react native support object”,结果-FlatList仅支持数组。但是底层的VirtualizedList确实支持对象。
My data is structured by recommendations from redux:
const data = {
byId: {
0: { id: '0', name: 'Bill' },
1: { id: '1', name: 'Steve' },
2: { id: '2', name: 'Dan' },
},
allIds: [0, 1, 2]
};
我需要VirtualizedList支持此数据结构
<VirtualizedList
// Use keyExtractor to help the list optimize performance
keyExtractor={item => item.id}
data={data}
initialNumToRender={7}
renderItem={({item})=> {
return <Text>{item.name}</Text>;
}}
// the virtualized list doesn't know how you want to extract your data
// you need to tell it
getItem={(data, index) => {
const dataIndex = data.allIds[index];
return data.byId[dataIndex];
}}
// it also needs to know how much data you have
getItemCount={data => data.allIds.length}
/>
FlatList实现和VirtualizedList之间的区别只是您需要覆盖getItem和getItemCount
您可以在此处看到完整的示例:https://snack.expo.io/@rcknti/virtualized-list-example
答案 3 :(得分: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
},
];
答案 4 :(得分:0)
您可以通过
<Flatlist
data={Object.values(obj)}
...
/>