ListView组件

ListView

---

一 .基本功能

1. 创建一个  myListView.js   文件

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView
} from 'react-native';


/*
*   ListView  数据列表
*   ListView 最重要的是设置每行显示的组件
*   section , header
*
*   ListView.DataSource, 给它传递一个普通数组,在使用 datasource 对象实例化一个 ListView 组件
*
*   ListView 实现: row/section 组件定义,设置数据
*
*   设置 ListView 数据源
*   将 dataSource 对象设置为 state 属性,ListView 会根据数据源进行渲染
* */

//原始数据 : 数组(字符串)
var contents = [
    "发个科目vhj",
    "放到聚苯板",
    "发的丰富的",
    "发的辅导班VCv",
    "发的丰富的",
    "发热激活码呢",
    "发个科目vhj",
    "放到聚苯板",
    "发的丰富的",
    "发的辅导班VCv",
    "发的丰富的",
    "发热激活码呢"
];
var MyListView;
MyListView = React.createClass({
    getInitialState: function () {
        //创建 dataSource 对象
        var ds = new ListView.DataSource({
            //通过判断决定渲染那些行组件,避免全部渲染,提高渲染效率
            rowHasChanged: (oldRow, newRow) => oldRow != newRow
        });
        return ({
            //设置 dataSource 时,不直接使用提供的原始数据,使用 cloneWithRows 对数据源进行复制
            //使用复制后的数据源实例化 ListView. 优势:当原始数据发生变化时, ListView 组件的 dataSource 不会改变
            dataSource: ds.cloneWithRows(contents)
        });
    },
    //渲染 row 组件,参数是每行要显示的数据对象
    _renderRow: function(rowData) {
        return(
            <View style={styles.row}>
                <Text style={styles.content}>{rowData}</Text>
            </View>
        );
    },
    render: function () {
        return(
            <ListView
            style ={styles.container}
            dataSource={this.state.dataSource}
            renderRow = {this._renderRow}
        />
        );
    }
});
var  styles = StyleSheet.create({
    container:{
        flex:1,
        marginTop:25
    },
    row:{
        justifyContent:"center",
        alignItems:"center",
        padding:5,
        height:100,
        borderBottomWidth:1,
        borderColor:"#CCCCCC"
    },
    content:{
        flex:1,
        fontSize:20,
        color:"blue",
        lineHeight:100
    }
});
module.exports = MyListView;

2.在  index.ios.js  文件中引用   myListView.js  

//ListView组件
import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

//练习1:实现ListView 基本功能
var HelloReactNative = require("./myListView");

AppRegistry.registerComponent('HelloReactNative', () => HelloReactNative);

---

二 .电影列表

---

1.本地加载一个 JSON 文件

添加   data.json  文件

2.创建 movieListView.js 文件

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ListView,
    Image
} from 'react-native';

//从文件中读取数据
var movieData = require("./data.json");

//获取所有 movies 数据,属性 movies 是一个数组
//原始数据
var movies = movieData.movies;


var MovieList = React.createClass({
    //初始化数据源(固定格式)
    getInitialState: function () {
      //创建 dataSource 对象
        var ds = new ListView.DataSource({
            rowHasChanged:(oldRow,newRow) => oldRow != newRow
        });
        return {
            dataSource: ds.cloneWithRows(movies)
        };
    },

    //渲染行组件
    _renderRow:function (movie) {
        return(
            <View style={styles.row}>
                <Image
                    style={styles.thumbnail}
                    source={{uri:movie.posters.thumbnail}}
                    />
                <View style={styles.rightContainer}>
                    <Text style={styles.title}>{movie.title}</Text>
                    <Text style={styles.year}>{movie.year}</Text>
                </View>
            </View>
        );

    },
    //渲染头部
    _renderHeader: function () {
        return(
            <View style={styles.header}>
                <Text style={styles.header_text}>Movies List</Text>
                <View style={styles.header_line}></View>
            </View>
        );
    },

    //渲染分割线
    _renderSeparator: function ( sectionID ,rowID) {
        return(
            <View style={styles.separator} key={sectionID+rowID}></View>
        );
    },

    render: function () {
        return(

            <ListView
                style={styles.listView}
                dataSource = {this.state.dataSource}
                renderRow ={this._renderRow}
                renderHeader = {this._renderHeader}
                renderSeparator = {this._renderSeparator}
                initialListSize = {10}
                />

        );
    }

});

var styles = StyleSheet.create({

    listView:{
        marginTop:25,
        flex:1,
        backgroundColor:"#F5FCFF"
    },
    //行组件样式
    row:{
        flexDirection:"row",
        padding:5,
        alignItems:"center",
        backgroundColor:"#F5FCFF"
    },
    thumbnail:{
        width:53,
        height:81,
        backgroundColor:"gray"
    },
    rightContainer:{
        marginLeft:10,
        flex:1,
    },
    title:{
        fontSize:18,
        marginTop:3,
        marginBottom:3,
        textAlign:"center"
    },
    year:{
        marginBottom:3,
        textAlign:"center"
    },

    //header 组件样式
    header:{
        height:50,
        backgroundColor:"#F5FCFF"
    },
    header_text:{
        flex:1,
        fontSize:20,
        fontWeight:"bold",
        textAlign:"center",
        lineHeight:44
    },
    header_line:{
        height:1,
        backgroundColor:"#CCCCCC"
    },
    //分割线组件样式
    separator:{
        height:1,
        backgroundColor:"#CCCCCC"
    }


});


module.exports = MovieList;

3.修改   index.ios.js   文件

//ListView组件

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

//练习1:实现ListView 基本功能
// var HelloReactNative = require("./myListView");

//练习2: 电影列表
var HelloReactNative = require("./movieListView");

AppRegistry.registerComponent('HelloReactNative', () => HelloReactNative);

4.在 xcode 中设置网络

直接打开Info.plist，插入以下代码

<key>NSAppTransportSecurity</key>
<dict>
 　　<key>NSAllowsArbitraryLoads</key>
  　　<true/>
</dict>