与对象反应 Native FlatList [英] React Native FlatList with object

问题描述

我想用 React Native 的 FlatiList 渲染对象，但是这个组件没有返回预期的结果.我的字典是这样的:

对象{Lisa.Sky":对象{"name": "丽莎","姓氏": "天空",年龄":21，性别":女性},Thomas.Prat":对象{"name": "托马斯","姓氏": "普拉特",年龄":33，性别男},Paul.Sing":对象{"name": "保罗","姓": "唱",年龄":88，性别男},安德鲁.布朗":对象{"name": "安德鲁","姓氏": "棕色",年龄":23，性别男},}

我已经实现了这样的 FlatList，但我有白屏

 <查看><滚动视图><平面列表数据={this.props.nameList}renderItem={({item}) =><查看键={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></查看>}keyExtractor={(index) =>index.toString()}/></滚动视图></查看>

谢谢

解决方案

你可以这样做.检查工作小吃.https://snack.expo.io/@nazrdogan/bad-cashew

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-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,
  },
});

这篇关于与对象反应 Native FlatList的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！