React-native IT喵~ ScrollView 嵌套ListView 如何实现上拉加载、下拉刷新_reactnative scrollview嵌套sectionlist-CSDN博客

这里我用的上拉、下拉组件是GitHub上这个：https://github.com/greatbsky/react-native-pull/wiki

里面有个renderHeader方法可以放ListView 上面的一些组件见我的demo：

欢迎大家关注一下基于React-naive开发的“IT喵~”项目。技能GET、互联网资讯、程序员相亲、GitHub监控。。。 Github地址：https://github.com/cbamls/kitty_front

效果图：

这里写图片描述

`HomeMidListView` 组件除了header 和footer 的中间部门

/**
* CopyRright (c)2014-2016 Haerbin Hearglobal Co.,Ltd
* Project: kitty_front
* Comments:
* Author:cbam
* Create Date:2017/6/6
* Modified By:
* Modified Date:
* Modified Reason:
*/

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ListView,
  Image,
  TouchableOpacity,
ActivityIndicator,
    Platform
} from 'react-native';
var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');
// 导入json数据
var Article = require('./Article.json'); // 数组

import {PullList} from 'react-native-pull';
import TopScrollView from './TopScrollView';
import ModuleList from './ModuleList';
import HomeListCell from '../../common/HomeListCell';
export default class HomeMidListView extends Component {

    constructor(props) {
        super(props);
        this.dataSource = [];
        this.state = {
            list: (new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})).cloneWithRows(this.dataSource),
            isLastPage: false
        };
        this.renderHeader = this.renderHeader.bind(this);
        this.renderRow = this.renderRow.bind(this);
        this.renderFooter = this.renderFooter.bind(this);
        this.loadMore = this.loadMore.bind(this);
        this.topIndicatorRender = this.topIndicatorRender.bind(this);
        // this.loadMore();
    }

     componentDidMount() {
            console.log("did");

            this._fetchData();
     }
    onPullRelease(resolve) {
        //do something
        setTimeout(() => {
            resolve();
        }, 2000);
    }
    _fetchData() {
        //alert("this => " + this.props.data.length);
         this.dataSource.push(...Article.data);
         console.log("length =>" + this.dataSource.length);
         this._setState(Article);
    }
    _setState(newState) {
         this.setState({
               list: this.state.list.cloneWithRows(this.dataSource),
               isLastPage: newState.isLastPage
         })
    }
    topIndicatorRender(pulling, pullok, pullrelease) {
        const hide = {position: 'absolute', left: -10000};
        const show = {position: 'relative', left: 0};
        setTimeout(() => {
            if (pulling) {
                this.txtPulling && this.txtPulling.setNativeProps({style: show});
                this.txtPullok && this.txtPullok.setNativeProps({style: hide});
                this.txtPullrelease && this.txtPullrelease.setNativeProps({style: hide});
            } else if (pullok) {
                this.txtPulling && this.txtPulling.setNativeProps({style: hide});
                this.txtPullok && this.txtPullok.setNativeProps({style: show});
                this.txtPullrelease && this.txtPullrelease.setNativeProps({style: hide});
            } else if (pullrelease) {
                this.txtPulling && this.txtPulling.setNativeProps({style: hide});
                this.txtPullok && this.txtPullok.setNativeProps({style: hide});
                this.txtPullrelease && this.txtPullrelease.setNativeProps({style: show});
            }
        }, 1);
        return (
            <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', height: 60}}>
                <Image source= {require('./img/pullView.gif')} style = {{width: 60, height: 60}}/>
                 <Text ref={(c) => {this.txtPulling = c;}}>下拉上刷新 </Text>
                <Text ref={(c) => {this.txtPullok = c;}}>禽兽 放开我</Text>
                 <Text ref={(c) => {this.txtPullrelease = c;}}>刷~ </Text>
            </View>
        );
    }

    render() {
        return (
          <View style={styles.container}>
              <PullList
                  style={{}}
                  onPullRelease={this.onPullRelease}
                   topIndicatorRender={this.topIndicatorRender} topIndicatorHeight={60}
                  renderHeader={this.renderHeader}
                  dataSource={this.state.list}
                  pageSize={5}
                  initialListSize={5}
                  renderRow={this.renderRow}
                  onEndReached={this.loadMore}
                  onEndReachedThreshold={1}
                  renderFooter={this.renderFooter}
                  />
          </View>
        );
    }

    renderHeader() {
      return (
          <View>
              <TopScrollView></TopScrollView>
              <ModuleList navigation={this.props.navigation}></ModuleList>
              <View style={styles.TopListStyle}>
                <View style={styles.TopLeftStyle}>
                   <Image source={{uri: 'rm'}} style={{width: 25, height: 25}}/>
                    <Text>热门文章</Text>
                </View>
                <TouchableOpacity style={styles.TopRightStyle} activeOpacity={0.5} onPress={() => alert("label ok")}>
                    <Image source={{uri: 'kitty_ic_label_grey_300_24dp'}} style={{width: 25, height: 25}}/>
                    <Text style={{color: '#E0E0E0'}}>
                        标签管理
                    </Text>
                </TouchableOpacity>
              </View>
          </View>
      );
    }

    // 返回具体的cell
        renderRow(rowData,sectionID,rowID,highlightRow){
               console.log("rowData => " + rowData.title);
               return(
                        <HomeListCell data={rowData}></HomeListCell>
                    );

        }

    renderFooter() {
      if(this.state.isLastPage) {
           return (
                      <Text style={{height: 100}}>没有更多数据...</Text>
                    );
      }
      return (
          <View style={{height: 100}}>
              <ActivityIndicator />
          </View>
      );
    }

    loadMore() {

        setTimeout(() => {
            this._fetchData();
        }, 1000);
    }

}

const styles = StyleSheet.create({
   container: {
            flex: 1,
            backgroundColor: '#e8e8e8'
        },


        iconStyle:{
            width: Platform.OS === 'ios' ? 30 : 25,
            height:Platform.OS === 'ios' ? 30 : 25
        },
       TopListStyle: {
         width: width,
         height: 30,
         flexDirection: 'row',
         backgroundColor: 'white',
         alignItems: 'center',
         marginTop: 10,
         borderBottomColor: 'grey',
         borderBottomWidth: 0.5
       },
       TopRightStyle: {
          flexDirection: 'row',
          alignItems: 'center',
          position: 'absolute',
          right:2,
       },
       TopLeftStyle: {
            flexDirection: 'row',
            alignItems: 'center'
       }
});

`HomeListCell`组件文章列表单个Cell

/**
* CopyRright (c)2014-2016 Haerbin Hearglobal Co.,Ltd
* Project: kitty_front
* Comments:
* Author:cbam
* Create Date:2017/6/8
* Modified By:
* Modified Date: 
* Modified Reason: 
*/

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  ListView
} from 'react-native';
var Dimensions = require('Dimensions');
var {width} = Dimensions.get('window');
// 导入json数据
var Article = require('../business/home/Article.json'); // 数组

export default class HomeListCell extends Component {

        constructor(props) {
            super(props);
            this.dataSource = [];
            this.state = {
                list: (new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2})).cloneWithRows(this.dataSource),
            };
        }
        componentWillReceiveProps(nextProps) {
            this._setState(nextProps.data);
        }
        componentDidMount() {
            this._setState(this.props.data);
        }
        _setState(newState) {
             this.setState({
                 "title": newState.title,
                  "img": newState.img,
                  "date": newState.date
             })
        }
  render() {
   // alert("state => " + this.state.title);
    return (
       <TouchableOpacity activeOpacity={0.5} onPress={()=>{alert('点击了')}}>
                              <View style={styles.cellViewStyle}>
                                    <View>
                                      <Text style={styles.topTitleStyle}>{this.state.title}</Text>
                                      <Text style={styles.bottomTitleStyle}>{this.state.date}</Text>
                                    </View>
                                    <View style={{marginRight: 0}}>
                                        <Image source={{uri: this.state.img}} style={styles.rightImageStyle}/>
                                    </View>
                              </View>
         </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
    cellViewStyle:{
       paddingTop:10,
       paddingLeft: 10,
       backgroundColor:'white',
       // 下划线
       borderBottomWidth:0.5,
       borderBottomColor:'#e8e8e8',

       // 确定主轴的方向
       flexDirection:'row'
    },

    rightImageStyle:{
     width:60,
     height:60,
    marginLeft:15
    },
    topTitleStyle:{
      color:'red',
      fontSize:15,
      width:width * 0.7,

    },

    bottomTitleStyle:{
     color:'blue',
    },
});