用对象反应 Native FlatList答案

【问题标题】：React Native FlatList with object用对象反应 Native FlatList
【发布时间】：2019-06-06 04:28:45
【问题描述】：

我想用 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>

谢谢

【问题讨论】：

你的代码的结果是什么？
我有一个白屏。 renderItem 永远不会被调用

标签： javascript react-native react-native-flatlist

【解决方案1】：

你可以这样做

<Flatlist 
   data={Object.values(obj)}
   ...
  />

【讨论】：

【解决方案2】：

我找到这篇旧帖子是因为我搜索了“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】：

您需要将数据用作数组（如果需要，可以从 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】：

你可以这样做。检查工作零食。 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,
  },
});

【讨论】：

这是一个很好的解决方案！您是否循环浏览每个渲染上的对象Object.keys(obj)？还是 FlatList 会做一些棘手的事情来避免这种情况？
密钥提取器呢？

【解决方案5】：

根据文档

为简单起见，数据只是一个普通数组。如果你想使用其他东西，比如不可变列表，使用底层

尝试将数据作为数组而不是对象传递

【讨论】：