ListView · React NativeReact Native的ListView的布局使用 - 玉思盈蝶 - 博客园
没有努力,你就没有资格说放弃!!!
ListView组件用于显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同。
ListView更适于长列表数据，且元素个数可以增删。和不同的是，ListView并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。
ListView组件必须的两个属性是dataSource和renderRow。dataSource是列表的数据源，而renderRow则逐个解析数据源中的数据，然后返回一个设定好格式的组件来渲染。
下面的例子创建了一个简单的ListView，并预设了一些模拟数据。首先是初始化ListView所需的dataSource，其中的每一项（行）数据之后都在renderRow中被渲染成了Text组件，最后构成整个ListView。
rowHasChanged函数也是ListView的必需属性。这里我们只是简单的比较两行数据是否是同一个数据（===符号只比较基本类型数据的值，和引用类型的地址）来判断某行数据是否变化了。
2&ListView相关属性:
译注：这意味着ListView可以使用所有ScrollView的属性。
dataSource ListViewDataSource #
实例（列表依赖的数据源）
initialListSize number #
指定在组件刚挂载的时候渲染多少行数据。用这个属性来确保首屏显示合适数量的数据，而不是花费太多帧逐步显示出来。
onChangeVisibleRows function #
(visibleRows, changedRows) =& void
当可见的行的集合变化的时候调用此回调函数。visibleRows 以 { sectionID: { rowID: true }}的格式包含了所有可见行，而changedRows 以{ sectionID: { rowID: true | false }}的格式包含了所有刚刚改变了可见性的行，其中如果值为true表示一个行变得可见，而为false表示行刚刚离开可视区域而变得不可见。
onEndReached function #
当所有的数据都已经渲染过，并且列表被滚动到距离最底部不足onEndReachedThreshold个像素的距离时调用。原生的滚动事件会被作为参数传递。译注：当第一次渲染时，如果数据不足一屏（比如初始值是空的），这个事件也会被触发。
onEndReachedThreshold number #
调用onEndReached之前的临界值，单位是像素。
pageSize number #
每次事件循环（每帧）渲染的行数。
removeClippedSubviews bool #
用于提升大列表的滚动性能。需要给行容器添加样式overflow:'hidden'。（Android已默认添加此样式）。此属性默认开启。
renderFooter function #
() =& renderable
页头与页脚会在每次渲染过程中都重新渲染（如果提供了这些属性）。如果它们重绘的性能开销很大，把他们包装到一个StaticContainer或者其它恰当的结构中。页脚会永远在列表的最底部，而页头会在最顶部。
renderHeader function #
renderRow function #
(rowData, sectionID, rowID, highlightRow) =& renderable
从数据源(Data source)中接受一条数据，以及它和它所在section的ID。返回一个可渲染的组件来为这行数据进行渲染。默认情况下参数中的数据就是放进数据源中的数据本身，不过也可以提供一些转换器。
如果某一行正在被高亮（通过调用highlightRow函数），ListView会得到相应的通知。当一行被高亮时，其两侧的分割线会被隐藏。行的高亮状态可以通过调用highlightRow(null)来重置。
renderScrollComponent function #
(props) =& renderable
指定一个函数，在其中返回一个可以滚动的组件。ListView将会在该组件内部进行渲染。默认情况下会返回一个包含指定属性的ScrollView。
renderSectionHeader function #
(sectionData, sectionID) =& renderable
如果提供了此函数，会为每个小节(section)渲染一个粘性的标题。
粘性是指当它刚出现时，会处在对应小节的内容顶部；继续下滑当它到达屏幕顶端的时候，它会停留在屏幕顶端，一直到对应的位置被下一个小节的标题占据为止。
renderSeparator function #
(sectionID, rowID, adjacentRowHighlighted) =& renderable
如果提供了此属性，一个可渲染的组件会被渲染在每一行下面，除了小节标题的前面的最后一行。在其上方的小节ID和行ID，以及邻近的行是否被高亮会作为参数传递进来。
scrollRenderAheadDistance number #
当一个行接近屏幕范围多少像素之内的时候，就开始渲染这一行。
ios--stickyHeaderIndices [number] #
一个子视图下标的数组，用于决定哪些成员会在滚动之后固定在屏幕顶端。举个例子，传递stickyHeaderIndices={[0]}会让第一个成员固定在滚动视图顶端。这个属性不能和horizontal={true}一起使用。
getMetrics()&
3.代码实现:
随笔 - 403转载请标明出处：本文出自:(一)前言& & & & 【好消息】个人站点已经上线执行,后面博客以及技术干货等精彩文章会同步更新，请大家关注收藏:&&&&&&& & & & &&今天我们一起来看一下ListView组件的使用详细解释以及详细事例&&&&&&&&&刚创建的React Native技术交流3群(),React Native技术交流4群()。请不要反复加群！欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!&&&&&&&&& ListView组件是React Native中一个比較核心的组件，用途很的广。该组件设计用来高效的展示垂直滚动的数据列表。最简单的API就是创建一个ListView.DataSource对象。同一时候给该对象传入一个简单的数据集合。而且使用数据源(data source)实例化一个ListView组件,定义一个renderRow回调方法(该方法的參数是一个数组)。该renderRow方法会返回一个可渲染的组件(该就是列表的每一行的item)(二)官方ListView简单实例&&&&&&&&&& 以下看一个关于ListView最简单的样例:'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
} from'react-native';
var ListViewDemo =React.createClass({
getInitialState: function() {
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) =& r1 !== r2});
dataSource: ds.cloneWithRows(['row1', 'row 2','row 3','row 4','row 5','row 6','row 7','row 8']),
render: function() {
dataSource={this.state.dataSource}
renderRow={(rowData) =&&Text&{rowData}&/Text&}
AppRegistry.registerComponent('ListViewDemo',() =& ListViewDemo);&&&&& 实例执行效果例如以下:(三)高级特性&&&&&&&& ListView能够支持一些高级特性。包含设置每一组的粘性的头部(相似于iPhone)、支持设置列表的header以及footer视图、当数据列表滑动到最底部的时候支持onEndReached方法回调、设备屏幕列表可见的视图数据发生变化的时候回调onChangeVisibleRows以及一些性能方面的优化特性。&&&&&&&& ListView设计的时候。当须要动态载入很大的数据的时候。以下有一些方法性能优化的方法能够让我妈ListView滚动的时候更加平滑： 仅仅更新渲染数据变化的那一行& ，rowHasChanged方法会告诉ListView组件是否须要又一次渲染当前那一行。详细能够查看ListViewDataSource实例 选择渲染的频率& 默认情况以下每个event-loop(事件循环)仅仅会渲染一行(能够同pageSize自己定义属性设置)。这样能够把大的工作量进行分隔，提供总体渲染的性能。(四)基本属性方法 ScrollView相关属性样式全部继承 dataSource&& ListViewDataSource& 设置ListView的数据源 initialListSize& number&
进行设置ListView组件刚刚载入的时候渲染的列表行数。用这个属性确定首屏或者首页载入的数量。而不是花大量的时间渲染载入很多页面数据，提供性能哦 onChangeVisibleRows& function&
(visibleRows,changedRows)=&void。当可见的行发生变化的时候回调该方法。visibleRows參数对全部可见的行为{selectionID:{rowId:true}}的形式，changedRow參数对已经改变可见的行为{selectionID:{rowID:true|false}}。该值true代表可见。false代表在视图之外不可见的行。 onEndReachedThreshold& number 当偏移量达到设置的临界值调用onEndReached onEndReached
function 方法。当全部的数据项行被渲染之后。而且列表往下进行滚动。一直滚动到距离底部onEndReachedThredshold设置的值进行回调该方法。原生的滚动事件进行传递(通过參数的形式)。 pageSize&& number 每一次事件的循环渲染的行数 removeClippedSubviews& bool&
该属性用于提供大数据列表的滚动性能。该使用的时候须要给每一行(row)的布局加入over:'hidden'样式。该属性默认是开启状态。 renderFooter
function 方法& ()=&renderable ，在每次渲染过程中头和尾总会又一次进行渲染。假设发现该又一次绘制的性能开销比較大的时候，能够使用StaticContainer容器或者其它合适的组件。在每一次渲染过程中Footer(尾)该会一直在列表的底部，header(头)该会一直在列表的头部 renderHeader& function 方法 使用情况和上面的renderFooter差点儿相同 renderRow function 方法&& (rowData,sectionID,rowID,highlightRow)=&renderable&& 该方法有四个參数，当中分别为数据源中一条数据，分组的ID，行的ID，以及标记是否是高亮选中的状态信息。 renderScrollComponent
function 方法 (props)=&renderable& 该方法能够返回一个能够滚动的组件。默认该会返回一个ScrollView renderSectionHeader
function (sectionData,sectionID)=&renderable&& 假设设置了该方法，这样会为每个section渲染一个粘性的header视图。该视图粘性的效果是当刚刚被渲染開始的时候，该会处于相应的内容的顶部，然后開始滑动的时候。该会跑到屏幕的顶端。直到滑动到下一个section的header(头)视图，然后被替代为止。 renderSeparator
(sectionID,rowID,adjacentRowHighlighted)=&renderable 假设设置该方法。会在被每一行的以下渲染一个组件作为分隔。除了每个section分组的头部视图前面的最后一行。 scrollRenderAheadDistance
number& 进行设置当该行进入屏幕多少像素以内之后就開始渲染该行(五)使用实例&&&& 5.1.首先看一个相对简单的实例，列表每一行显示一个图片以及文字，详细代码例如以下:'use strict';
import React, {
AppRegistry,
Component,
StyleSheet,
TouchableOpacity,
} from'react-native';
var THUMB_URLS = [
require('./imgs/like.png'),
require('./imgs/dislike.png'),
require('./imgs/call.png'),
require('./imgs/fist.png'),
require('./imgs/bandaged.png'),
require('./imgs/flowers.png'),
require('./imgs/heart.png'),
require('./imgs/liking.png'),
require('./imgs/party.png'),
require('./imgs/poke.png'),
require('./imgs/superlike.png'),
require('./imgs/victory.png'),
var ListViewDemo =React.createClass({
getInitialState: function() {
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) =& r1 !== r2});
dataSource: ds.cloneWithRows(['row1', 'row 2','row 3','row 4','row 5','row 6','row 7','row 8','row 9','row10','row 11','row 12']),
_renderRow: function(rowData: string,sectionID: number, rowID: number) {
var imgSource = THUMB_URLS[rowID];
&TouchableOpacity&
&View style={styles.row}&
&Image style={styles.thumb} source={imgSource} /&
&Text style={{flex:1,fontSize:16,color:'blue'}}&
{rowData + '我是測试行号哦~'}
&/TouchableOpacity&
render: function() {
dataSource={this.state.dataSource}
renderRow={this._renderRow}
var styles =StyleSheet.create({
flexDirection: 'row',
justifyContent: 'center',
padding: 10,
backgroundColor: '#F6F6F6',
width: 50,
height: 50,
AppRegistry.registerComponent('ListViewDemo',() =& ListViewDemo);&& 执行效果例如以下:&&& 5.2.实例实现表格布局，代码例如以下:'use strict';
var React =require('react-native');
AppRegistry,
TouchableHighlight,
StyleSheet,
var THUMB_URLS = [
require('./imgs/like.png'),
require('./imgs/dislike.png'),
require('./imgs/call.png'),
require('./imgs/fist.png'),
require('./imgs/bandaged.png'),
require('./imgs/flowers.png'),
require('./imgs/heart.png'),
require('./imgs/liking.png'),
require('./imgs/party.png'),
require('./imgs/poke.png'),
require('./imgs/superlike.png'),
require('./imgs/victory.png'),
require('./imgs/logo.png'),
var ListViewDemo =React.createClass({
getInitialState: function() {
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) =& r1 !== r2});
dataSource:ds.cloneWithRows(this._genRows({})),
_pressData: ({}: {[key: number]: boolean}),
componentWillMount: function() {
this._pressData = {};
render: function() {
initialListSize={12}
contentContainerStyle={styles.list}
dataSource={this.state.dataSource}
renderRow={this._renderRow}
_renderRow: function(rowData: string,sectionID: number, rowID: number) {
var imgSource = THUMB_URLS[rowID];
&TouchableHighlight underlayColor=&red&&
&View style={styles.row}&
&Image style={styles.thumb} source={imgSource} /&
&Text style={styles.text}&
&/TouchableHighlight&
_genRows: function(pressData: {[key: number]:boolean}): Array&string& {
var dataBlob = [];
for (var ii = 0; ii & THUMB_URLS.ii++) {
dataBlob.push('单元格 ' + ii);
return dataB
var styles =StyleSheet.create({
marginTop:5,
justifyContent: 'space-around',
flexDirection: 'row',
flexWrap: 'wrap'
justifyContent: 'center',
padding: 5,
margin: 3,
width: 85,
height: 85,
backgroundColor: '#F6F6F6',
alignItems: 'center',
borderWidth: 1,
borderRadius: 5,
borderColor: '#CCC'
width: 45,
height: 45
marginTop: 5,
fontWeight: 'bold'
AppRegistry.registerComponent('ListViewDemo',() =& ListViewDemo);& 执行效果例如以下:(六)最后总结&&&&&&&&& 今天我们主要学习一下ListView组件的谅解以及相关实例演示。大家有问题能够加一下群React Native技术交流群()或者底下进行回复一下。& & & &尊重原创，转载请注明：From Sky丶清（） 侵权必究！& & & &关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)& & &关注我的微博。能够获得很多其它精彩内容& & &&
阅读(...) 评论()react native listview怎么改变状态_百度知道
react native listview怎么改变状态
我有更好的答案
首先安装了nodejs 4.1 版本然后 安装了 npm install -g react-native-cli 模块安装 android sdk 并且配置android 环境变量安装gradle 环境进入 这个博客 里边有 react-native for android 项目，下来，然后执行 npm install 先安装 react 依赖模块包打开两个 命令窗口 1. 一个 执行react-native start ，另一个执行react-native run-android 就可以了
采纳率：93%
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
我想实现这样的话效果
当点击某项时，该项底部会出现下划线，目前界面已实现，但是未能实现选中状态,求大神解！遇到的问题:使用setState时并不能正常实现效果。代码如下:
var isSelectedArr = [true, false, false, false, false, false];//第一项默认选中
class MyAffair extends Component {
// 默认属性
static defaultProps = {};
// 属性类型
static propTypes = {};
constructor(props) {
super(props);
// 初始状态
var ds = new ListView.DataSource({rowHasChanged: (row1, row2)=&row1 !== row2});
this.state = {
dataSource: ds.cloneWithRows(tabs)
renderRow(rowData, sectionID, rowID, highlightRow) {
&TouchableOpacity style={styles.row} onPress={()=& {
isSelectedArr = [false, false, false, false, false, false];
isSelectedArr[rowID] = !isSelectedArr[rowID];
//打印是确定是需要的效果
console.log(isSelectedArr);
&View style={styles.rowTitle}&
&Text style={{color: rowData[1]}}&{rowData[0]}&/Text&
style={[styles.underLine, {backgroundColor: isSelectedArr[rowID] ? rowData[1] : 'transparent'}]}/&//FIXME:然而此处无法正常渲染
&/TouchableOpacity&
render() {
&View style={styles.container}&
&BackHeader left="&" title={this.props.title} onBack={()=& this.props.navigator.pop()}/&
&Text style={styles.title}&我的办事&/Text&
&ListView contentContainerStyle={styles.grid} dataSource={this.state.dataSource}
pageSize={3} bounces={false}
renderRow={this.renderRow.bind(this)}/&
&AffairList/&
求大神给出一个解决的办法！多谢！
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
看样子是没有刷新 ListView，你应该在 dataSource 中加入一个 isSelected 的属性，然后通过cloneWithRows方法去改变数据源
1.保存一个临时的数组
constructor(props) {
super(props);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) =& row1 !== row2,
tempDataSource: []
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData.result),
tempDataSource: responseData.result
2.在点击的时候执行数据处理
_xxxxxxAction(item) {
var array = this.state.tempDataSource.slice()
var index = array.indexOf(item)
array[index] = {
isSelected: true
this.setState({
dataSource: this.state.dataSource.cloneWithRows(array),
tempDataSource: array
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
var tabs = [];
renderRow(rowData, sectionID, rowID, highlightRow) {
&TouchableOpacity style={styles.row} onPress={() =& {
if (this.lastRowID) {
tabs[this.lastRowID].hidden =
tabs[0].hidden =
tabs[rowID].hidden =
var newTabs = JSON.parse(JSON.stringify(tabs));
this.setState({
dataSource: this.state.dataSource.cloneWithRows(newTabs)
this.lastRowID = rowID;//将上次点击过的储存起来
this.getData(rowData.title);
console.log(rowData.title);
&View style={styles.rowTitle}&
&Text style={{color: rowData.color}}&{rowData.title}&/Text&
style={[styles.underLine, {backgroundColor: rowData.color, opacity: rowData.hidden ? 0 : 1}]}/&
&/TouchableOpacity&
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。