import React,{Component} from 'react'
import {
View,
Text,
Image,
StyleSheet,
FlatList,
ActivityIndicator
} from 'react-native'
class Movie extends Component{
state={
arr:[
'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1856129457,2351794353&fm=26&gp=0.jpg',
'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1856129457,2351794353&fm=26&gp=0.jpg',
'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1856129457,2351794353&fm=26&gp=0.jpg',
'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2207260983,3766756222&fm=26&gp=0.jpg',
'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2207260983,3766756222&fm=26&gp=0.jpg',
'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2207260983,3766756222&fm=26&gp=0.jpg'
],
loading:false
}
_renderItem({item,index})
{
console.log(item);
return(
<View style={styles.item}>
<Image source={{uri:item}} style={styles.image}/>
<Text>电影名称</Text>
</View>
)
}
divider()
{
return (
<View style={styles.divider}>
</View>
)
}
footer()
{
return (
<ActivityIndicator size="large" color="#ccc" animating={this.state.loading}/>
)
}
loadMore()
{
this.setState({
loading:true
})
this.setState({
arr:this.state.arr.concat(this.state.arr)
})
this.setState({
loading:false
})
}
refresh()
{
this.setState({
loading:true
})
this.setState({
arr:[
'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1856129457,2351794353&fm=26&gp=0.jpg',
'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1856129457,2351794353&fm=26&gp=0.jpg',
'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1856129457,2351794353&fm=26&gp=0.jpg',
'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2207260983,3766756222&fm=26&gp=0.jpg',
'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2207260983,3766756222&fm=26&gp=0.jpg',
'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2207260983,3766756222&fm=26&gp=0.jpg'
]
})
this.setState({
loading:false
})
}
emptyLoad()
{
return (
<Text>数据稍后就来</Text>
)
}
render()
{
return(
<View>
<FlatList
style={styles.wrap}
data={this.state.arr}
renderItem={this._renderItem.bind(this)}
numColumns={2}
keyExtractor={(item,index)=>item+index}
columnWrapperStyle={{justifyContent:'space-around',marginBottom:20}}
ItemSeparatorComponent={this.divider}
ListFooterComponent={this.footer.bind(this)}
// 上拉加载
onEndReachedThreshold={0.2}
onEndReached={this.loadMore.bind(this)}
// 下拉刷新
refreshing={this.state.loading}
onRefresh={this.refresh.bind(this)}
// 列表为空时加载
ListEmptyComponent={this.emptyLoad}
/>
</View>
)
}
}
const styles = StyleSheet.create({
wrap:{
paddingHorizontal:10,
},
item:{
width:'47%',
justifyContent:'center',
alignItems:'center',
},
image:{
height:200,
width:'100%',
marginBottom:10
},
divider:{
width:'100%',
height:2,
backgroundColor:'#ccc',
marginBottom:5
}
})
export default Movie
ReactNative 上拉加载和下拉刷新模板
猜你喜欢
转载自blog.csdn.net/weixin_43294560/article/details/108307091
今日推荐
周排行