React Native刷新加载更多

react native的刷新加载更多，有多种方案

• "加载更多" 需要点击
• "加载更多" 根据手势向上滑动，自动显示"加载中"

第一种方案

写一个底部布局，根据当前页面的状态，动态更新底部的文字

render(){
    return (
        <View style={[styles.container]}>
            <ScrollView showsVerticalScrollIndicator={false}
                        refreshControl={this.refreshControlView()}>
                {this.renderContent()}
                {this.footerContent()}
            </ScrollView>
        </View>
    )
}


renderContent() {
        if (!this.state.refreshing || this.state.loadedData) {
            const list = this.state.mList;
            return (
                <View style={{marginBottom: 20}}>
                    <FlatList
                        data={list}
                        keyExtractor={(item, index) => index.toString()}
                        renderItem={({item}) => (this.renderItem(item))}
                        showsVerticalScrollIndicator={false}
                    />
                </View>
            )
        }
    }

    /***
     * 底部显示
     * @returns {*}
     */
    footerContent() {

        if (!this.state.refreshing || this.state.loadedData) {
            return (
                <View style={{
                    width: deviceWidth,
                    height: 45,
                    justifyContent: 'center',
                    alignItems: 'center',
                }}>
                    <TouchableOpacity
                        activeOpacity={0.7}
                        onPress={this.loadMore.bind(this)}>
                        <Text style={{
                            fontSize: 12,
                            color: ColorTextGrey
                        }}>
                            {this.state.footerInfo}
                        </Text>
                    </TouchableOpacity>
                </View>
            )
        } else {
            return (
                <View></View>
            )
        }
    }

第二种方案

具体的参考
https://github.com/mrarronz/react-native-blog-examples/tree/master/Chapter4-PullRefresh/PullRefreshExample