(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间)
我们已经讲完了 ScrollView 和 ListView ,自然而然我们就应该讲的组件就是下拉刷新的喽,因为它们几个是兄弟,常常一块出现,就跟打麻将似的,四缺一不能打,那它们三就是斗地主,三缺一不能玩。今天讲的这个组件就是它们的兄弟:RefreshControl 。
我的母亲官网是这么介绍我的,说:我是大家在使用我的兄弟ScrollView或ListView添加拉刷新功能用的,我们几个好兄弟常常在一起玩。当我的兄弟ScrollView中 scrollY:0时,触发一个onRefresh事件,我就开始工作,下拉刷新起来。
注意:refreshing 是一个你们可以控制我的属性,这就是为什么你们在使用onRefresh方法时,必须设置为 true,否则,我会立刻停止刷新,不跟你们玩了。
一如既往的,想要跟我玩,而且要玩的好,必须先得了解我的性格和特点才行,知己知彼,才能运用自如嘛。我这人,比较自信,所以不怕把我的弱点和特点透漏给敌人。
来,看看我的直观魅力美化效果图:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
ListView,
Image,
TouchableHighlight,
RefreshControl,
View
} from 'react-native';
class RefreshControlDemo extends Component {
constructor(props) {
super(props);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
isRefreshing: false,
dataSource: ds.cloneWithRows(this._genRows(-1)),
};
}
_genRows(flag){
const dataBlob = [];
for(let i = 0 ; i< 88 ; i ++ ){
if(i == flag){
dataBlob.push("非著名程序员+我被打了"+i);
}else{
dataBlob.push("非著名程序员"+i);
}
}
return dataBlob;
}
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this._renderRow.bind(this)}
refreshControl={
<RefreshControl
refreshing={this.state.isRefreshing}
onRefresh={this._onRefresh.bind(this)}
tintColor="#ff0000"
colors={['#ff0000', '#00ff00', '#0000ff']}
progressBackgroundColor="#ffff00"
enabled={true}
/>
}
/>
);
}
_renderRow (rowData,sectionID, rowID) {
return (
<TouchableHighlight onPress={() => {
this._pressRow(rowData,rowID);
}}
underlayColor='red'
>
<View>
<View style={styles.row}>
<Image style={{width:40,height:40}} source={require('./Thumbnails/head.jpg')}/>
<Text style={{flex:1,fontSize:20,marginLeft:20}}>
{rowData}
</Text>
</View>
</View>
</TouchableHighlight>
);
}
_pressRow(rowData,rowID){
alert(rowData);
this.setState({dataSource: this.state.dataSource.cloneWithRows(
this._genRows(rowID))});
}
_refreshRows(){
const dataBlob = [];
for(let i = 0 ; i< 8 ; i ++ ){
dataBlob.push("我爱非著名程序员");
}
return dataBlob;
}
_onRefresh(){
this.setState({isRefreshing: true});
setTimeout(() => {
this.setState({
isRefreshing: false,
dataSource: this.state.dataSource.cloneWithRows(
this._refreshRows())
});
}, 5000);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
row: {
flexDirection: 'row',
justifyContent: 'center',
alignItems:'center',
padding: 10,
},
});
AppRegistry.registerComponent('RefreshControlDemo', () => RefreshControlDemo);
今天我们讲的这个demo例子,我用的是ListView和RefreshControl搭配使用,因为官网的例子是ScrollView和RefreshControl的搭配使用。所以关于ScrollView和RefreshControl怎么使用,大家请移步官网,看例子,我这里就不重复介绍了。官方例子地址:https://facebook.github.io/react-native/docs/refreshcontrol.html