React Native刷新加载更多

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

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

第一种方案

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

render(){
    return (
        
            
                {this.renderContent()}
                {this.footerContent()}
            
        
    )
}


renderContent() {
        if (!this.state.refreshing || this.state.loadedData) {
            const list = this.state.mList;
            return (
                
                     index.toString()}
                        renderItem={({item}) => (this.renderItem(item))}
                        showsVerticalScrollIndicator={false}
                    />
                
            )
        }
    }

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

        if (!this.state.refreshing || this.state.loadedData) {
            return (
                
                    
                        
                            {this.state.footerInfo}
                        
                    
                
            )
        } else {
            return (
                
            )
        }
    }

第二种方案

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