Rect-Native ListView 学习笔记

ListView 学习 类似iOS的 TableView，不过ListView灵活性更强

ListView常用属性 :官方文档

下文学习资料来源：App(Movie Fetcher)

Simulator Screen Shot 2016年8月10日 下午3.05.52.png

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

    //-------------华丽丽模块分界线----------//

    //演示数据
    var MOCKED_MOVIES_DATA = [
      {title: 'Title', year: '2015', posters: {thumbnail: 'https://ss0.baidu.com/-Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D360/sign=9f6e24765adf8db1a32e7a623922dddb/0ff41bd5ad6eddc492d491153ddbb6fd52663328.jpg'}},
    ];
    //请求数据 -> Json
    var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json';

    class SampleAppMovies extends Component {

      constructor(props) {
        super(props);
        this.state = {
           dataSource: new ListView.DataSource({
            rowHasChanged: (row1, row2) => row1 !== row2,
          }),
          loaded: false,
        };
      }
      componentDidMount() {
        this.fetchData();
      }

      fetchData() {
        fetch(REQUEST_URL)
          .then((response) => response.json())
          .then((responseData) => {
            this.setState({
              dataSource: this.state.dataSource.cloneWithRows(responseData.movies),
              loaded: true,
            });
          })
          .done();
      }

      render() {
        if(!this.state.loaded){
          return this.renderLoadingView();
        }
        return(
          <ListView
            dataSource={this.state.dataSource}
            renderRow={this.renderMovie}
            style={styles.listview}
          />
        );
      }

      renderLoadingView() {
        return (
          <View style={styles.container}>
            <Text>
              Loading movies...
            </Text>
          </View>
        );
      }

      renderMovie(movie) {
        return (
          <View style={styles.container}>
            <Image
              source={{uri: movie.posters.thumbnail}}
              style={styles.thumbnail}
            />
            <View style={styles.rightContainer}>
              <Text style={styles.title}>{movie.title}</Text>
              <Text style={styles.year}>{movie.year}</Text>
            </View>
          </View>
        );
      }
    }

     //-------------风格样式--------------//
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },

      thumbnail: {
        width: 53,
        height: 81,
      },

      rightContainer:{
        flex: 1,
      },

      tilte: {
        fontSize: 20,
        textAlign: 'center',
        marginBottom: 8,
      },
      year: {
        textAlign: 'center',
      },

      listView: {
        paddingTop: 20,
        backgroundColor: '#F5FCFF',
      },

    });

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