FlatList在屏幕上不显示任何数据。只是显示空白屏幕而没有任何错误

时间:2018-12-03 11:51:22

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

我是本机和学习FlatList组件的新手。但卡在空白屏幕上。我无奈如何追踪问题。使用android API 22级并在模拟器中运行。

我的代码如下。

import React from 'react';
import { FlatList, StyleSheet, Text, View, Image } from 'react-native';

class feed extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            photo_feed: [0,1,2,3,4],
            refresh: false
        }
    }

    loadNew = () => {
        this.setState({
            refresh: true
        });

        this.setState({
           photo_feed: [5,6,7,8,9],
           refresh: false    
        });
    }

    render(){

        return(

            <View style={{style: 1}}>
                <View style={ {height:50, paddingTop: 15, paddingBottom: 15, backgroundColor: 'white', borderColor: 'lightgrey', borderBottomWidth: 0.5, justifyContent: 'center', alignItems: 'center'} } >
                <Text> Feed screen </Text>
               </View>

                <FlatList 
                  refreshing={this.state.refresh}
                  onRefresh={this.loadNew}
                  data={this.state.photo_feed}
                  keyExtractor={ (item, index) => index.toString() }
                  style={{flex:1,  width: 480, backgroundColor:'#eee'}}
                  renderItem={({item, index}) => (
                    <View key={index}>
                         <View>
                             <Text>Time Ago</Text>
                             <Text>@Jagdish</Text>
                         </View>
                         <View>
                            <Image
                             source={{uri:'https://source.unsplash.com/random/500'+Math.floor((Math.random()*800)+500)}}
                             style={{resizeMode: 'cover', width:'100%', height: 275}}
                            />
                         </View>
                         <View>
                             <Text>Caption text here...</Text>
                             <Text>View comments...</Text>
                         </View>
                     </View>
                     )} 
                />            
            </View>
        )

    }
}

export default feed;

版本信息:

react-native-cli:2.0.1

本机:0.57.7

如果有人有想法。请回答。预先感谢!

0 个答案:

没有答案