React Native从零开始（六）ListView的简单使用

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

微信：