感觉自己需要提一下了，最近简单的写了个demo练练手，主要记录下自己的收获。
在移动开发中我们用得最多和最重要的一个控件就是滚动视图，在iOS开发中我们用的这个控件叫做TableView，在Android开发中这个控件叫做ListView，然后就是现在的跨平台开发。最近最火的跨平台开发框架当属Facebook开源的React-Native了。在React-Native中也有一个实现滚动视图的组件也叫做ListView
最近在工作中接触到了这个开源框架，在项目中用到了RN（React-Natove简写）的ListView，然后自己写了个简单的demo。
RN中ListView的属性就不一一讲解了，在ReactNative中文中已经讲得很详细了。
不管是RN中的ListView还是iOS中的TableView都得有数据源的即DataSource，因为RN跨平台框架底层是调用原生的控件。
<div align='center'>
那么在RN中是这样设置数据源的
创建一个ListView.DataSource类型的对象this.ds
this.ds = new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2})
创建一个数组this.datasource并赋值，这个数组中装着的是5个对象。
this.dataSource = [ {name:'柴小圣',id:1,picCategory:'写真图',picUri:'http://res.mamiw.com/uploads/allimg/160408/0450044201-0.jpg',picDescribe:'极品美女柴小圣美艳写真图',messageNumber:99,label:['搞笑六点半','网剧'],firstLabelImage:'https://tse4-mm.cn.bing.net/th?id=OIP.ngQ_96uWK-a50WUtnjGagAEsEP&w=221&h=200&c=7&qlt=90&o=4&pid=1.7'},
{name:'柴小圣',id:2,picCategory:'写真图',picUri:'http://res.mamiw.com/uploads/allimg/160408/0450045C3-1.jpg',picDescribe:'O(∩_∩)O哈哈~美艳写真图',messageNumber:43,label:['欢乐者联盟','网剧','哈哈'],firstLabelImage:'https://tse4-mm.cn.bing.net/th?id=OIP.wsbd4ipN95lWxm-6g5aINQEsEs&w=200&h=200&c=7&qlt=90&o=4&pid=1.7'},
{name:'柴小圣',id:3,picCategory:'写真图',picUri:'http://res.mamiw.com/uploads/allimg/160408/0450042929-2.jpg',picDescribe:'(～￣▽￣)～漂亮妹纸',messageNumber:55,label:['搞笑'],firstLabelImage:'https://tse4-mm.cn.bing.net/th?q=杰尼龟&w=120&h=120&c=1&rs=1&qlt=90&pid=InlineBlock&mkt=zh-CN&adlt=strict&t=1&mw=247'},
{name:'柴小圣',id:4,picCategory:'写真图',picUri:'http://res.mamiw.com/uploads/allimg/160408/0450041D6-3.jpg',picDescribe:'看看✧(≖ ◡ ≖✿)嘿嘿',messageNumber:33,label:['奇葩使者','雷剧','Ls'],firstLabelImage:'https://tse3-mm.cn.bing.net/th?q=可达鸭&w=120&h=120&c=1&rs=1&qlt=90&pid=InlineBlock&mkt=zh-CN&adlt=strict&t=1&mw=247'},
{name:'柴小圣',id:5,picCategory:'写真图',picUri:'http://res.mamiw.com/uploads/allimg/160408/045004O27-4.jpg',picDescribe:'极品美女柴小圣美艳写真图',messageNumber:99,label:['搞笑六点半','牛'],firstLabelImage:'https://tse2-mm.cn.bing.net/th?q=加菲猫&w=120&h=120&c=1&rs=1&qlt=90&pid=InlineBlock&mkt=zh-CN&adlt=strict&t=1&mw=247'},
]
使用this.ds.cloneWithRows方法为ListViewDataSource复制填充数据this.dataSource
this.state = {
dataSource:this.ds.cloneWithRows(this.dataSource)
}
使用ListView组件
//设置数据源和每行的实际渲染
<ListView dataSource={this.state.dataSource} renderRow={this._renderRow}/>
ListView组件的renderRow属性
renderRow function
(rowData, sectionID, rowID, highlightRow) => renderable
从数据源(Data source)中接受一条数据，以及它和它所在section的ID。返回一个可渲染的组件来为这行数据进行渲染。默认情况下参数中的数据就是放进数据源中的数据本身，不过也可以提供一些转换器。
如果某一行正在被高亮（通过调用highlightRow函数），ListView会得到相应的通知。当一行被高亮时，其两侧的分割线会被隐藏。行的高亮状态可以通过调用highlightRow(null)来重置。
这里的renderRow使用起来有点类似iOS开发中的自定义Cell
具体使用
_renderRow(rowData: string, sectionID: number, rowID: number){
return(
<View key={rowID}>
<ImageTextMixedConfigurationCell imageUri={rowData.picUri} text = {rowData.picDescribe}/>
<View style={styles.bottomStyle}>
<TEMlabelButton totalWidth = {1/2*WIDTH}
imageUri = {rowData.firstLabelImage}
selected = {(obj)=>{alert('text='+obj.labelText+'selectedIndex='+obj.selectedIndex)}}
id = {rowData.id}
titleArray = {rowData.label}/>
<BottomRightView messageNumber = {rowData.messageNumber} rowID = {rowID}/>
</View>
</View>
)
}
ListView组件使用完整代码
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Dimensions,
TouchableOpacity,
ListView,
Image,
Text,
View
} from 'react-native';
/**
*引入自定义组件
*/
import ImageTextMixedConfigurationCell from './ImageTextMixedConfigurationCell.js';
import TEMcollectionButton from './CollectionButton.js';
import BottomRightView from './BottomRightView.js';
import TEMlabelButton from './LabelButton.js';
/**
*关闭烦人的警告框（关闭有好有坏自行斟酌）
*/
console.disableYellowBox = true;
/**
*引入系统监听机制
*/
import RCTDeviceEventEmitter from 'RCTDeviceEventEmitter';
export const WIDTH = Dimensions.get('window').width;
export const HEIGHT = Dimensions.get('window').height;
export default class ListViewDemo extends Component {
constructor(props){
super(props)
this.ds = new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2})
this.dataSource = [ {name:'柴小圣',id:1,picCategory:'写真图',picUri:'http://res.mamiw.com/uploads/allimg/160408/0450044201-0.jpg',picDescribe:'极品美女柴小圣美艳写真图',messageNumber:99,label:['搞笑六点半','网剧'],firstLabelImage:'https://tse4-mm.cn.bing.net/th?id=OIP.ngQ_96uWK-a50WUtnjGagAEsEP&w=221&h=200&c=7&qlt=90&o=4&pid=1.7'},
{name:'柴小圣',id:2,picCategory:'写真图',picUri:'http://res.mamiw.com/uploads/allimg/160408/0450045C3-1.jpg',picDescribe:'O(∩_∩)O哈哈~美艳写真图',messageNumber:43,label:['欢乐者联盟','网剧','哈哈'],firstLabelImage:'https://tse4-mm.cn.bing.net/th?id=OIP.wsbd4ipN95lWxm-6g5aINQEsEs&w=200&h=200&c=7&qlt=90&o=4&pid=1.7'},
{name:'柴小圣',id:3,picCategory:'写真图',picUri:'http://res.mamiw.com/uploads/allimg/160408/0450042929-2.jpg',picDescribe:'(～￣▽￣)～漂亮妹纸',messageNumber:55,label:['搞笑'],firstLabelImage:'https://tse4-mm.cn.bing.net/th?q=杰尼龟&w=120&h=120&c=1&rs=1&qlt=90&pid=InlineBlock&mkt=zh-CN&adlt=strict&t=1&mw=247'},
{name:'柴小圣',id:4,picCategory:'写真图',picUri:'http://res.mamiw.com/uploads/allimg/160408/0450041D6-3.jpg',picDescribe:'看看✧(≖ ◡ ≖✿)嘿嘿',messageNumber:33,label:['奇葩使者','雷剧','Ls'],firstLabelImage:'https://tse3-mm.cn.bing.net/th?q=可达鸭&w=120&h=120&c=1&rs=1&qlt=90&pid=InlineBlock&mkt=zh-CN&adlt=strict&t=1&mw=247'},
{name:'柴小圣',id:5,picCategory:'写真图',picUri:'http://res.mamiw.com/uploads/allimg/160408/045004O27-4.jpg',picDescribe:'极品美女柴小圣美艳写真图',messageNumber:99,label:['搞笑六点半','牛'],firstLabelImage:'https://tse2-mm.cn.bing.net/th?q=加菲猫&w=120&h=120&c=1&rs=1&qlt=90&pid=InlineBlock&mkt=zh-CN&adlt=strict&t=1&mw=247'},
]
this.state = {
dataSource:this.ds.cloneWithRows(this.dataSource)
}
}
componentDidMount(){
this.listenerA=RCTDeviceEventEmitter.addListener('deletCellEvent',(rowID) => {
this.deletCell(rowID);
});
}
componentWillUnmount(){
this.listenerA.remove();
}
deletCell(rowID){
this.dataSource.splice(rowID,1);
this.setState({
dataSource : this.ds.cloneWithRows(this.dataSource)
})
}
_renderRow(rowData: string, sectionID: number, rowID: number){
return(
<View key={rowID}>
<ImageTextMixedConfigurationCell imageUri={rowData.picUri} text = {rowData.picDescribe}/>
<View style={styles.bottomStyle}>
<TEMlabelButton totalWidth = {1/2*WIDTH}
imageUri = {rowData.firstLabelImage}
selected = {(obj)=>{alert('text='+obj.labelText+'selectedIndex='+obj.selectedIndex)}}
id = {rowData.id}
titleArray = {rowData.label}/>
<BottomRightView messageNumber = {rowData.messageNumber} rowID = {rowID}/>
</View>
</View>
)
}
render() {
return (
<View style={styles.container}>
<View style={styles.topBar}/>
<ListView dataSource={this.state.dataSource} renderRow={this._renderRow}/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
topBar: {
width: WIDTH,
height: 20,
},
bottomStyle: {
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
width: WIDTH,
backgroundColor: '#FFF',
height: 40
},
});
AppRegistry.registerComponent('ListViewDemo', () => ListViewDemo);
完整demo
https://github.com/jungleiOS/RN_ListView.git
如果大家觉得喜欢请在GitHub上赏作者一个Star吧
