React Native从零开始（六）ListView的简单使用
先来一张效果图：
一、首先是数据的准备
这里有一个链接我们可以在这里得到数据源，至于网络获取实现ListView的话那么，在下一篇博客会讲解如何网络获取数据，这篇博客就是简单的介绍如何使用ListView
https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json
做过前段开发的小伙伴应该都知道各种的json格式化数据，然后转换一下在你的工程目录下新建一个json格式的文件存放这些json数据就好。
内部数据，转换格式后是这个样子的
二、新建我们的ListView，最好单独给他一个文件夹和文件。
1、获取本地的json数据
//1、获取本地数据（或者网络数据）
var dataMovies = require("../Data/data.json");2、设置state属性，这个以后在网络获取的时候如果发生改变，那么ListView也会刷新，这里写的是ES6的写法
/*
2、实现对state的设置
* */
constructor(props){
super(props);
var ds = new ListView.DataSource({
/*判断这两行是否相同，就是是否发生变化，决定渲染哪些行组件，避免全部渲染，提高渲染效率*/
rowHasChanged: (oldRow, newRow) => oldRow !== newRow
});
this.state = {
/*不使用原始数据，有一个拷贝的过程*/
/*使用复制后的数据源实例化ListView。优势：当原始数据发生变化时，那ListView组件的DataSource不会改变*/
/*是一个数组*/
dataSource:ds.cloneWithRows(dataMovies.movies)
};
}这里利用ListView的DataSource
ListViewDataSource为ListView组件提供高性能的数据处理和访问。我们需要调用方法从原始输入数据中抽取数据来创建ListViewDataSource对象，并用其进行数据变更的比较。原始输入数据可以是简单的字符串数组，也可以是复杂嵌套的对象——分不同区(section)各自包含若干行(row)数据。可以看一下官网对于DataSource的属性。其中dataMovies后面有.movies，这样我们就得到了这个数组将其存放至dataSource中去，而不是整个json数据
3.1、渲染ListView
render(){
return(
<ListView
style={styles.listView}
dataSource={this.state.dataSource}
renderRow={_renderRow}
renderHeader={_renderHeader}
renderSeparator={_renderSeparator}
initialListSize={10}
/>
);
}
dataSource是设置数据源，renderRow是渲染行
renderHeader是渲染头部
renderSeparator是渲染分割先
initialListSize是设置初始渲染的行数
3.2、实现渲染
//渲染行组件
function _renderRow(movie){
return(
<View style={styles.row}>
<Image
style={styles.thumbnail}
source={{uri:movie.posters.thumbnail}}/>
<View >
<Text >{movie.title}</Text>
<Text >{movie.year}</Text>
</View>
</View>
);
}
//渲染头部
function _renderHeader(){
return(
<View >
<Text >Movies List</Text>
<View ></View>
</View>
);
}
//渲染分割线
function _renderSeparator(sectionId,rowId){
return(
<View
style={styles.separator}
key={sectionId+rowId}></View>
);
}
这里的数据填充，就是解析json就好直接.即可。对于分割线的具体参数可以看下文档写的很明白了。4、在index的页面中调用
var MyListView = require("./MyView/MyListView");
export default class ListViewDemo extends Component {
render() {
return (
<MyListView/>
);
}
}三、献上完整的渣渣代码
/**
* Created by 11158 on 2017-01-16.
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ListView,
Image
} from 'react-native';
/*
ListView数据列表
ListView最重要的是设置每行显示的组件
section ， header
使用ListView.DataSource数据源，给他传递一个普通的数组，再使用DataSource来实例化一个ListView组件。
ListView实现：
（1）行、section，组件设置
（2）设置数据
设置ListView数据源的时候需要借助state属性
需要将DataSource对象设置为state属性,ListView会根据数据源进行渲染
* */
//1、获取本地数据（或者网络数据）
var dataMovies = require("../Data/data.json");
/*
* 3.2设置样式
* */
//渲染行组件
function _renderRow(movie){
return(
<View style={styles.row}>
<Image
style={styles.thumbnail}
source={{uri:movie.posters.thumbnail}}/>
<View >
<Text >{movie.title}</Text>
<Text >{movie.year}</Text>
</View>
</View>
);
}
//渲染头部
function _renderHeader(){
return(
<View >
<Text >Movies List</Text>
<View ></View>
</View>
);
}
//渲染分割线
function _renderSeparator(sectionId,rowId){
return(
<View
style={styles.separator}
key={sectionId+rowId}></View>
);
}
class MyListView extends Component{
/*
2、实现对state的设置
* */
constructor(props){
super(props);
var ds = new ListView.DataSource({
/*判断这两行是否相同，就是是否发生变化，决定渲染哪些行组件，避免全部渲染，提高渲染效率*/
rowHasChanged: (oldRow, newRow) => oldRow !== newRow
});
this.state = {
/*不使用原始数据，有一个拷贝的过程*/
/*使用复制后的数据源实例化ListView。优势：当原始数据发生变化时，那ListView组件的DataSource不会改变*/
/*是一个数组*/
dataSource:ds.cloneWithRows(dataMovies.movies)
};
}
render(){
return(
<ListView
style={styles.listView}
dataSource={this.state.dataSource}
renderRow={_renderRow}
renderHeader={_renderHeader}
renderSeparator={_renderSeparator}
initialListSize={10}
/>
);
}
}
const styles = StyleSheet.create({
listView:{
marginTop:25,
backgroundColor:"#F5FCFF"
},
row:{
flexDirection:"row",
padding:5,
alignItems:"center",
backgroundColor:"#F5FCFF"
},
thumbnail:{
width:53,
height:81,
backgroundColor:"gray"
},
separator:{
height:1,
backgroundColor:"black"
}
});
module.exports = MyListView;大家可以加好友交流学习
QQ：1115856293
微信：
作者：SuperBigLw 发表于2017/1/16 10:42:23 原文链接
阅读：30 评论：0 查看评论