我是本机和学习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
如果有人有想法。请回答。预先感谢!