React-native IT喵~ ScrollView 嵌套ListView 如何实现上拉加载、下拉刷新

这里我用的 上拉、下拉组件是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', }, });