React Native - ScrollView

     做过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)，不然会出现报错，错误信息如下：

最终实现效果如下：