React-Native 加入小组
FlatList : 数据渲染_下拉刷新_上拉加载
// 1 导包
import React,{Component} from 'react'
import {StyleSheet,View, Text,Button,
FlatList,RefreshControl,ActivityIndicator} from 'react-native'
import {createAppContainer} from 'react-navigation'
import {createStackNavigator} from 'react-navigation-stack'
import { red } from 'ansi-colors'
//2 组织页面
class HomeSreen extends Component{
constructor(props){
super(props)
console.disableYellowBox = true
}
render(){
const {navigation} = this.props
return(
<View style={styles.homeContainer}>
<Text>Home Sreen</Text>
<Button
title='Go to FlatList'
onPress={()=>navigation.navigate('FlatList')}
/>
</View>
)
}
}
const PROVINCE_NAMES = [{province:'湖北'},{province:'广东'},{province:'浙江'},{province:'河南'},{province:'湖南'}]
class FlatLisScreen extends Component{
constructor(props){
super(props)
this.state={
isFreshing:false,
data:PROVINCE_NAMES
}
}
_renderItem(item){
return (
<View style={styles.item}>
<Text style={styles.itemText}>{item.province}</Text>
</View>
)
}
_loadFreshData(){
// 开启刷新标记
this.setState({
isFreshing:true
})
// 请求网红数据
setTimeout(() => {
//模拟网络数据
var dataNew = [{province:'安徽'},{province:'江西'},{province:'黑龙江'}]
var dataOld = this.state.data
// dataOld.unshift({province:'安徽'},{province:'江西'},{province:'黑龙江'})
var dataAll = [...dataNew,...dataOld]
// 设置本地(state)为最新网络数据
this.setState({
isFreshing:false,
data:dataAll
})
}, 2000);
// FlatList data 和 组件state 数据进行绑定，就会同步刷新
}
// 自定义下拉加载
_loadComponent(){
return(
<View style={styles.loadContainer}>
<ActivityIndicator
style={styles.indicator}
size={'large'}
color={'red'}
animating={true}
/>
<Text>loading more</Text>
</View>
)
}
_loadData(){
// 请求网红数据
setTimeout(() => {
//模拟网络数据
var dataNew = [{province:'北京'},{province:'上海'},{province:'深圳'}]
var dataOld = this.state.data
var dataAll = [...dataOld,...dataNew]
// 设置本地(state)为最新网络数据
this.setState({
isFreshing:false,
data:dataAll
})
}, 2000);
}
render(){
return(
<View style={styles.flatContainer}>
<FlatList
data={this.state.data}
// renderItem 表达式里面 函数参数 是一个对象，需要结构才能获取
renderItem={
({item})=>this._renderItem(item)
}
// refreshing={this.state.isFreshing}
// onRefresh={()=>{
// this._loadFreshData()
// }}
// 自定义 下拉刷新
refreshControl={
<RefreshControl
tintColor='#ff0000'
title='Refreshing'
colors={['#ff0000','#00ff00','#0000ff']}
progressBackgroundColor='#ffff00'
refreshing={this.state.isFreshing}
onRefresh={()=>{
this._loadFreshData()
}}
/>
}
ListFooterComponent={()=>this._loadComponent()}
onEndReached={()=>this._loadData()}
/>
</View>
)
}
}
//3 定义样式
const styles = StyleSheet.create(
{
homeContainer:{
flex:1,
justifyContent:'center',
alignItems:'center'
},
flatContainer:{
flex:1,
},
item:{
height:200,
margin:15,
alignItems:'center',
justifyContent:'center',
backgroundColor:'#f5fcff'
},
itemText:{
fontSize:20,
color:'black'
},
loadContainer:{
alignItems:'center'
},
indicator:{
margin:10,
}
}
)
// 4 组织路由关系
const AppStack = createStackNavigator(
{
Home:{
screen:HomeSreen
},
FlatList:{
screen:FlatLisScreen,
navigationOptions:{
title:'FlatList'
}
}
},{
initialRouteName:'Home',
defaultNavigationOptions:{
headerStyle:{
backgroundColor:'green'
},
headerTintColor:'#fff',
headerTitleStyle:{
fontWeight:'bold',
fontSize:20
}
}
}
)
//5 包裹导出
const AppContainer = createAppContainer(AppStack)
export default AppContainer
