先上效果图
image.png
1.首先准备一些数据
为了方便的展示ListView(先不care网络请求，网络请求会在下一篇文章中分享) ，我在本地写了一组数据源，使用json格式.
方法： 在工程目录下新建json格式的文件.
image.png
存放这些json数据即可.
"students"：[
{
"name"："Jessy"，
"age"："15"，
"sex"："boy"，
"introduce"： "My name is Jessy， I like Grassland!"，
"interests"： {
"picture"： "http：//ojm0517sf.bkt.clouddn.com/1.jpg"，
"profile"： "http：//ojm0517sf.bkt.clouddn.com/1.jpg"，
"detailed"： "http：//ojm0517sf.bkt.clouddn.com/1.jpg"，
"original"： "http：//ojm0517sf.bkt.clouddn.com/1.jpg"
}
}，
{
"name"："Lucy"，
"age"："16"，
"sex"："girl"，
"introduce"： "My name is Lucy， I like windmill!"，
"interests"： {
"picture"： "http：//ojm0517sf.bkt.clouddn.com/2.jpg"，
"profile"： "http：//ojm0517sf.bkt.clouddn.com/2.jpg"，
"detailed"： "http：//ojm0517sf.bkt.clouddn.com/2.jpg"，
"original"： "http：//ojm0517sf.bkt.clouddn.com/2.jpg"
}
} ...
2.读取本地json数据
var loadData = require("./Data/studentData.json");
3. 在构造方法中，创建listview
constructor(props) {
super(props);
var listDataSource = new ListView.DataSource({
/*判断这两行是否相同，是否发生变化，决定渲染哪些行组件，避免全部渲染，提高渲染效率*/
rowHasChanged ： (oldRow，newRow) => oldRow !== newRow
});
this.state = {
// 将本地数据中的students拷贝至dataSource 中以实例化ListView
// 我们拷贝的是loadData.students即得到的是students数组
dataSource： listDataSource.cloneWithRows(loadData.students)
};
}
注意以下四点：
1.ListViewDataSource为ListView组件提供高性能的数据处理与访问。我们需要调用方法从原始输入数据中
抽取数据，来创建ListViewDataSource对象，
并用其进行数据变更的比较 (rowHasChanged),原始输入数据可以是简单的字符串数组，也可以是
复杂嵌套的对象。
2. rowHasChanged：由ListViewDataSourcey提供，用来判断行内容是否发生变化，如果发生变化，决定
渲染哪些组件，避免全局渲染造成的效率低下.
3.拷贝过程：不使用原始数据，而是使用拷贝后的数据来实例化ListView.如此实现的优点是：
当原始数据发生变化时，那ListView组件的DataSource不会改变.
4.设置state属性，这个以后在网络获取的时候如果发生改变，那么ListView也会刷新.
4.ListView的渲染
渲染ListView需要五个关键步骤：
- 数据源 dataSource
- 渲染行 renderRow
- 渲染头部 renderHeader
- 渲染分割线 renderSeparator
- 初始化listView的加载数目 initialListSize
render() {
return (
<ListView
style = {styles.listView}
dataSource = {this.state.dataSource}
renderRow = {_renderRow}
renderHeader = {_renderHeader}
renderSeparator = {_renderSeparator}
initialListSize={10}
/>
);
}
分别实现这些渲染方法：
//渲染行
function _renderRow(student) {
return(
<View style ={styles.row}>
<Image
style = {styles.thumbnail}
source ={{uri： student.interests.picture}}
/>
<View>
<Text> {student.introduce}</Text>
<Text> My age is {student.age}</Text>
</View>
</View>
);
}
// 渲染头部
function _renderHeader() {
return(
<View>
<Text>Students List</Text>
</View>
);
}
// 渲染分割线
function _renderSeparator(sectionId， rowId) {
return(
<View style ={styles.separator}
key = {sectionId + rowId}>
</View>
);
}
在index页面中引用
import TestListView from "./TestListView";
export default class Setup extends Component {
render() {
return (
<TestListView/>
);
}
}
最后，我们再总结下ListView的实现：
- 获取数据源(本地数据/网络数据)
- 使用ListView.DataSource数据源，像其传递一个普通的数组，通过ListViewDataSource的cloneWithRows方法，实现数据拷贝.
再使用DataSource来实例化一个ListView组件。 - 设置ListView数据源的时候需要借助state属性
需要将dataSource对象设置为state属性，那么当数据发生变化的时候，listView也会刷新. - listView的渲染renderRow是渲染行renderHeader是渲染头部renderSeparator是渲染分割先initialListSize是设置初始渲染的行数
献上全局代码:
/***ListView:add by Shmily ****/
import React, {Component} from 'react';
import {
StyleSheet,
View,
ListView,
Image,
Text
}
from 'react-native';
// 读取本地数据
var loadData = require("./Data/studentData.json");
export default class TestListView extends Component {
constructor(props) {
super(props);
var listDataSource = new ListView.DataSource({
rowHasChanged : (oldRow,newRow) => oldRow !== newRow
});
this.state = {
// 将本地数据中的movies拷贝至dataSource 中以实例化ListView
dataSource: listDataSource.cloneWithRows(loadData.students)
};
}
render() {
return (
<ListView
style = {styles.listView}
dataSource = {this.state.dataSource}
renderRow = {_renderRow}
renderHeader = {_renderHeader}
renderSeparator = {_renderSeparator}
initialListSize={10}
/>
);
}
}
//渲染行
function _renderRow(student) {
return(
<View style ={styles.row}>
<Image
style = {styles.thumbnail}
source ={{uri: student.interests.picture}}
/>
<View>
<Text> {student.introduce}</Text>
<Text> My age is {student.age}</Text>
</View>
</View>
);
}
// 渲染头部
function _renderHeader() {
return(
<View>
<Text>Students List</Text>
</View>
);
}
// 渲染分割线
function _renderSeparator(sectionId, rowId) {
return(
<View style ={styles.separator}
key = {sectionId + rowId}>
</View>
);
}
const styles = StyleSheet.create({
listView: {
marginTop:25,
backgroundColor: '#E5ECFF',
},
row:{
flexDirection:'row',
padding:5,
alignItems:'center',
backgroundColor:'#F5FCFF',
padding:15,
paddingLeft:10,
paddingTop:10,
paddingBottom:10,
paddingRight:15
},
thumbnail:{
width:100,
height:100,
backgroundColor:"gray"
},
separator:{
height:1,
backgroundColor:"black"
}
});
网友评论