React Native 学习笔记十（ListView的使用）

关于 listView和scrollView

scrollView 垂直方向 可适用于不同组件和布局的混合（元素不同） 能够渲染所有元素（即使元素被挤出屏幕）  但是适用于 较短的滚动列表 

listView 垂直方向 元素结构接近（数据不同而已） 不是渲染所有的元素优先渲染屏幕上的可见元素  适用于较长列表的滚动 

class ListViewBasicForm extends Component {
//初始化模拟数据
constructor(props) {
super(props);
//设置数据源 rowHasChanged为了检测是否需要重新渲染当前行(更新row的策略，
// 一般来说都是prevRowData和nextRowData不相等时更新row)
const ds = new ListView.DataSource({rowHasChanged: (r1, r2)=>r1 != r2});
//state的初始设置  设置数据源
this.state={
dataSource :ds.cloneWithRows(['jhon','joy','tom','Joel', 'James', 'Jimmy',
'Jackson', 'Jillian', 'Julie', 'Devin'
])
};
}

render() {
let display = this.state.showText ? this.props.text : ' ';
return (
<View style={{padding:20}}>
<ListView
dataSource={this.state.dataSource}
renderRow={(rowData)=><Text>{rowData}</Text>}
/>
</View>
);
}
}

listView的使用：

必须有两个属性是dataSource（数据源 ）和renderRow   （解析的数据 以 设定好的格式进行渲染）

 dataSource（数据源 ）讲解：

 listView需要数据的来源  传入的数据必须是数组 或者是字典里面的嵌套数组

demo2  自定义显示字典里面的嵌套数组

class ListViewBasicForm extends Component {

//初始化模拟数据
constructor(props) {
super(props);

//设置数据源 rowHasChanged为了检测是否需要重新渲染当前行(更新row的策略，
// 一般来说都是prevRowData和nextRowData不相等时更新row)
const ds = new ListView.DataSource({rowHasChanged: (r1, r2)=>r1 != r2});
//state的初始设置  设置数据源
this.state = {
dataSource: ds.cloneWithRows(['row1', 'row 2', 'row 3', 'row 4',
'row5', 'row 6', 'row 7', 'row 8',
'row9', 'row 10', 'row 11', 'row 12',
])
};
this.isClick = -1;
}

/**
* 设置每一行的解析数据 以及解析的格式
* @param rowData 每行的数据
* @param sectionID
* @param rowID 第几行
* @returns {XML}
* @private
*/
_renderRow(rowData:string, sectionID:number, rowID:number) {
//模拟数据
var THUMB_UTLS = [
require('./img/a.jpg'),
require('./img/b.jpg'),
require('./img/c.jpg'),
require('./img/favicon.png'),
require('./img/a.jpg'),
require('./img/b.jpg'),
require('./img/c.jpg'),
require('./img/favicon.png'),
require('./img/a.jpg'),
require('./img/b.jpg'),
require('./img/c.jpg'),
require('./img/favicon.png'),
require('./img/a.jpg'),
require('./img/b.jpg'),
require('./img/c.jpg'),
require('./img/favicon.png')
];
var imgSource = THUMB_UTLS[rowID];
return (
//可点击的组件
<TouchableOpacity>
<View>

<View style={styles.row}>
<Image style={styles.thumb} source={imgSource}/>
<Text style={{flex:1,fontSize:16,color:'blue'} }
>
{rowData + '我是测试行号哦~'}
</Text>
</View>
</View>
</TouchableOpacity>
);
}

render() {
let display = this.state.showText ? this.props.text : ' ';
return (
<ListView
//设置两个重要的参数
// 数据源
dataSource={this.state.dataSource}
//解析数据和填充格式
renderRow={this._renderRow}
/>
);
}
}

结果：