React-Native学习笔记 使用ListView加载网络数据

使用ListView加载网络数据

创建一个构造器

//js组件的构造函数，js的生命周期
constructor(props) {
super(props);
//listView数据源
dataSource: new ListView.DataSource({
rowHasChanged: function (row1, row2) {
return row1 !== row2
},
sectionHeaderHasChanged:function (s1, s2) {
return s1 !== s2
},
}),
//网络请求状态
error: false,
errorInfo: ""
};
}

创建网络请求

var REQUEST_URL = 'https://api.github.com/search/repositories?q=javascript&sort=stars';

fetchData() {
//这个是js的访问网络的方法
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
//复制数据源
dataSource: this.state.dataSource.cloneWithRows(responseData.items)
});
})
.catch((error) => {
this.setState({
error: true,
errorInfo: error
})
})
.done();

创建Loading View

//加载等待的view
renderLoadingView() {
return (
<View style={styles.container}>
<Text>
Loading start...
</Text>
</View>
);
}

创建请求失败时显示的view

//加载失败view
renderErrorView(error) {

return (
<View style={styles.container}>
<Text>
Fail: {error}
</Text>
</View>
);
}

数据显示view

//获取到数据加载到控件上
renderData() {
return (
<ScrollView style={
{
paddingTop: 22,
paddingLeft: 5,
paddingBottom: 5,
paddingRight: 5
}}>
<Text style={{fontSize: 20}}>data:</Text>
<ListView dataSource={this.state.dataSource}
renderRow={this.renderItemView}/>
</ScrollView>
);
}

//返回itemView
renderItemView(item) {
return (
<View>
<Text style={{fontSize: 15, color: 'blue'}}>name: {item.name} ({item.stargazers_count} stars)</Text>
<Text style={{fontSize: 13, color: 'black'}}>description: {item.description}</Text>
</View>
);
}

最后就是数据请求了

//rn的生命周期，初始化的时候会执行
componentDidMount() {
//请求数据
this.fetchData();
}

//返回当前显示的view
render() {
//第一次加载等待的view
if (!this.state.dataSource && !this.state.error) {
return this.renderLoadingView();
} else if (this.state.error) {
//请求失败view
return this.renderErrorView(this.state.errorInfo);
}
//加载数据

return this.renderData();
}

显示结果

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

var REQUEST_URL = 'https://api.github.com/search/repositories?q=javascript&sort=stars';

class HelloWorld extends Component {
//js组件的构造函数，js的生命周期
constructor(props) {
super(props);
this.state = {
//listView数据源
dataSource: new ListView.DataSource({
rowHasChanged: function (row1, row2) {
return row1 !== row2
},
sectionHeaderHasChanged:function (s1, s2) {
return s1 !== s2
},
}),
//网络请求状态
error: false,
errorInfo: ""
};
}

//rn的生命周期，初始化的时候会执行
componentDidMount() {
//请求数据
this.fetchData();
}

//返回当前显示的view
render() {
//第一次加载等待的view
if (!this.state.dataSource && !this.state.error) {
return this.renderLoadingView();
} else if (this.state.error) {
//请求失败view
return this.renderErrorView(this.state.errorInfo);
}
//加载数据

return this.renderData();
}

//加载等待的view
renderLoadingView() {
return (
<View style={styles.container}>
<Text>
Loading start...
</Text>
</View>
);
}

//加载失败view
renderErrorView(error) {

return (
<View style={styles.container}>
<Text>
Fail: {error}
</Text>
</View>
);
}

//获取到数据加载到控件上
renderData() {
return (
<ScrollView style={
{
paddingTop: 22,
paddingLeft: 5,
paddingBottom: 5,
paddingRight: 5
}}>
<Text style={{fontSize: 20}}>data:</Text>
<ListView dataSource={this.state.dataSource}
renderRow={this.renderItemView}/>
</ScrollView>
);
}

//返回itemView
renderItemView(item) {
return (
<View>
<Text style={{fontSize: 15, color: 'blue'}}>name: {item.name} ({item.stargazers_count} stars)</Text>
<Text style={{fontSize: 13, color: 'black'}}>description: {item.description}</Text>
</View>
);
}

fetchData() {
//这个是js的访问网络的方法
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
//复制数据源
dataSource: this.state.dataSource.cloneWithRows(responseData.items)
});
})
.catch((error) => {
this.setState({
error: true,
errorInfo: error
})
})
.done();
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},

});

// 注意，这里用引号括起来的'HelloWorld'必须和你init创建的项目名一致
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);