React Native——电影列表

简单的介绍ListView组件的使用
ListView 会安排视图的渲染，只显示当前在屏幕上的那些元素，而那些已经渲染好了但移动到了屏幕之外的元素，则会从原生视图结构中移除，从而提高性能。

首先要做的事情，从React中引入ListView

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

在constructor 中初始化dataSource

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

loaded状态来判断数据是否加载成功.

现在来看看render函数

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

如何loaded为false 加载renderLoadingView

renderLoadingView(){    return(      <View style={styles.container}>        <Text>          正在加载电影...        </Text>      </View>    );  }

在组件加载完成后刷新数据

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();  }

通过setSate刷新界面

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

这样就可以将电影列表显示出来了。
接下来添加item的点击事件
修改之后的代码：
采用bind

return(          <ListView            dataSource={this.state.dataSource}            renderRow={this.renderMovie.bind(this)}            style={styles.listView}            />        );

renderMovie(movie){    return(      <TouchableHighlight onPress={this.alertImage.bind(this,movie)}>      <View style={styles.container}>        <Image source={{uri:movie.posters.thumbnail}} style={styles.thumbnail}/>        <View style={styles.right}>            <Text>              {movie.title}            </Text>            <Text>              {movie.year}            </Text>          </View>      </View>      </TouchableHighlight>    );  }

alertImage(movie){     alert(movie.title);   }