做过iOS原生开发的小伙伴都知道,ScrollView使用的频率比较高,UITableView和UICollectionView都是继承自UIScrollView,RN中当然也不可能缺少这样的神奇组件。
ScrollView必须要有一个确定高度才能正常工作,ScrollView内部得其他响应者尚无法阻止ScrollView本身成为响应者。
用ScrollView和定时器,模拟了一个下拉更新的例子:
export default class MyScrollView extends Component<Props> {
constructor(props) {
super(props);
this.state = {
isRefreshing:false,
};
}
onRefresh(){
// refreshing={true};
this.setState({isRefreshing:true});
setTimeout(()=>{
this.setState({isRefreshing:false});
}, 3000);
console.log("刷新开始");
};
render() {
return (
<View style={styles.container}>
<ScrollView
style={styles.scrollView}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={true}
keyboardDismissMode={'on-drag'}
refreshControl={
<RefreshControl
refreshing={this.state.isRefreshing}
tintColor="red"
title="正在刷新..."
onRefresh={this.onRefresh.bind(this)}/>
}>
<View style={[styles.viewStyle, styles.view_1]}></View>
<View style={[styles.viewStyle, styles.view_2]}></View>
<View style={[styles.viewStyle, styles.view_3]}></View>
</ScrollView>
</View>
);
}
}复制代码
在RN中,ScrollView内部的其他响应者尚无法阻止ScrollView本身成为响应者,意思也就是,ScrollView内部的组件无法接收响应。故运行过程中,因为onRefresh刷新相应中需要用到回调函数,而在回调函数中使用了this属性,故onRefresh中调用函数需要bind(this),不然会出现报错,错误信息如下:
最终实现效果如下: