1.首先,先写一个类DemoProject,继承Component
紧接着,为他写一个构造器
我们在构造器中声明了一个成员变量state,并为它定义了两个属性,dataSource和loaded
由于是弱类型语言,所以不用声名类型,重点看ListView实例化的部分,这段代码
rowHasChanged是ListView必须要实现的一个function,否则会报错,当然也可以采用lambda表达式的写法,
这样的写法使得代码更简洁。
2.Component有一个回调函数componentDidMount(),它在所有UI组建加载完成后会被调用,类似于Android中Activity生命周期的onCreate,我们在它被回调的时候发起网络请求,
fetchData方法是我们自定义的请求网络的方法
有关fetch语句,详细可以看http://www.cnblogs.com/parry/p/using_fetch_in_nodejs.html
这里需要注意的是,console.log(responseData);这行代码,你可以在AndroidStudio的控制台下看到打印出来的信息,是一段json格式的数据,其中有一个key是movies,它的值是一段JsonArray,我们通过responseData.movies的方式取得movies的值,将它赋值给成员变量dataSource
3.再写一个方法,用于返回单行数据,
其中{movie.year}等,都是2中console.log(responseData)看到的服务器返回的json数据的key
4.render()方法返回整个UI
只能返回只有一个根节点的组建,不能返回多个,上面代码中,ListView中的三个属性都是原生属性,将我们实例化并且填充好数据的ListView赋值给dataSource
dataSource={this.state.dataSource}
将renderMovie方法的返回值赋值给renderRow,不做过多解释。
以下是全部代码
紧接着,为他写一个构造器
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);