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

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

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

效果图：

60, height: 60}}/>
{this.txtPulling = c;}}>下拉上刷新
{this.txtPullok = c;}}>禽兽 放开我
{this.txtPullrelease = c;}}>刷~

);
}

render() {
return (
this.onPullRelease}
topIndicatorRender={this.topIndicatorRender} topIndicatorhljs-number">60}
renderHeader={this.renderHeader}
dataSource={this.state.list}
pageSize={5}
initialListSize={5}
renderRow={this.renderRow}
OnEndReached={this.loadMore}
OnEndReachedThreshold={1}
renderFooter={this.renderFooter}
/>

);
}

renderHeader() {
return (


this.props.navigation}>
'rm'}} hljs-number">25, height: 25}}/>
热门文章

0.5} OnPress={() => alert("label ok")}>
'kitty_ic_label_grey_300_24dp'}} hljs-number">25, height: 25}}/>
'#E0E0E0'}}>
标签管理




);
}

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

);

}

renderFooter() {
if(this.state.isLastPage) {
return (
100}}>没有更多数据...
);
}
return (
100}}>


);
}

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 (
 0.5} OnPress={()=>{alert('点击了')}}>
 this.state.title}
 this.state.date}
 
 0}}>
 this.state.img}} hljs-title">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',
 },
});