紧接着,为他写一个构造器
constructor(props) { super(props); this.state = { dataSource: new ListView.DataSource({ rowHasChanged: function(row1, row2) {return row1 !== row2}, }), loaded: false, }; }
我们在构造器中声明了一个成员变量state,并为它定义了两个属性,dataSource和loaded
由于是弱类型语言,所以不用声名类型,重点看ListView实例化的部分,这段代码
dataSource: new ListView.DataSource({ rowHasChanged: function(row1, row2) {return row1 !== row2}, })
rowHasChanged是ListView必须要实现的一个function,否则会报错,当然也可以采用lambda表达式的写法,
rowHasChanged: (row1, row2) => row1 !== row2
这样的写法使得代码更简洁。
2.Component有一个回调函数componentDidMount(),它在所有UI组建加载完成后会被调用,类似于Android中Activity生命周期的onCreate,我们在它被回调的时候发起网络请求,
componentDidMount(){ this.fetchData(); }
fetchData方法是我们自定义的请求网络的方法
fetchData() { fetch(REQUEST_URL) .then((response) => response.json()) .then((responseData) => { console.log(responseData); this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseData.movies), loaded: true, }); }).catch(function(e){ }) .done(); }
有关fetch语句,详细可以看http://www.cnblogs.com/parry/p/using_fetch_in_nodejs.html
这里需要注意的是,console.log(responseData);这行代码,你可以在AndroidStudio的控制台下看到打印出来的信息,是一段json格式的数据,其中有一个key是movies,它的值是一段JsonArray,我们通过responseData.movies的方式取得movies的值,将它赋值给成员变量dataSource
this.state.dataSource.cloneWithRows(responseData.movies) //这段代码的意思是填充ListView中的数据 dataSource: this.state.dataSource.cloneWithRows(responseData.movies) //这段代码的意思是将填充好数据的ListView对象的句柄指向成员变量dataSource,当然也可以称之为引用。
3.再写一个方法,用于返回单行数据,
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> ); }
其中{movie.year}等,都是2中console.log(responseData)看到的服务器返回的json数据的key
4.render()方法返回整个UI
return ( <ListView dataSource={this.state.dataSource} renderRow={this.renderMovie} style={styles.listView} /> );
只能返回只有一个根节点的组建,不能返回多个,上面代码中,ListView中的三个属性都是原生属性,将我们实例化并且填充好数据的ListView赋值给dataSource
dataSource={this.state.dataSource}
将renderMovie方法的返回值赋值给renderRow,不做过多解释。
以下是全部代码
import React, { Component, } from 'react'; import { AppRegistry, Image, StyleSheet, Text, View, ListView, } from 'react-native'; var REQUEST_URL = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json'; class DemoProject 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) => { console.log(responseData); this.setState({ dataSource: this.state.dataSource.cloneWithRows(responseData.movies), loaded: true, }); }).catch(function(e){ }) .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> ); } }; var styles = StyleSheet.create({ container: { flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, rightContainer: { flex: 1, }, title: { fontSize: 20, marginBottom: 8, textAlign: 'center', }, year: { textAlign: 'center', }, thumbnail: { width: 53, height: 81, }, listView: { paddingTop: 20, backgroundColor: '#F5FCFF', }, }); AppRegistry.registerComponent('AwesomeProject', () => DemoProject);