React Native

时间:2018-02-21 13:45:52

标签: android ios react-native react-native-flatlist

Helo伙计们,我是React Native的新手。我正在练习Flat List。我将一些静态数据放在 flatListData.js 中作为JSON格式,实际代码在 BasicFlatList.js 中。并希望将其加载到Flat List中。但是得到错误。我正在使用模拟器输出。

这是我的 BasicFlatList.js 文件:

import React, {Component} from 'react';
import { ActivityIndicator, StyleSheet, Text, View,Image, FlatList } from 'react-native';
import flatListData from '../data/flatListData'


class FlatListItem extends React.Component{

render(){

    return(

        <View>
            <Text>this.props.item.name</Text>
        </View>

    );

}

}

export default class FlatList extends Component {

render() {

    return (

        <View style = {{flex:1, marginTop:10}}>

            <FlatList>

                data = {flatListData}
                renderItem = {({item, index})=>{

                return(

                    <FlatListItem item={item} index={index}>

                    </FlatListItem>

                );
            }}

            </FlatList>

        </View>

    );

}
}

这是 flatListData.j 的文件:

var flatListData = [
{
    "key" : "t57t76e578tyre8gfret6",
    "name" : "banana",
    "foodDescription" : "healthy",

},
{
    "key" : "t745turehf8er7tr64r",
    "name" : "banana",
    "foodDescription" : "healthy",
}
];

module.exports = flatListData;

这是 index.js 文件:

import { AppRegistry } from 'react-native';

import FlatList from './components/BasicFlatList';
AppRegistry.registerComponent('FirebaseEmailLoginTest', () => FlatList);

错误:response error code 500

0 个答案:

没有答案