React-native 网络请求

@TOCReact-native 网络请求

第一步

import React, { Component } from “react”;
import { StyleSheet, Text, FlatList, View } from “react-native”;

export default class App extends Component {
constructor(props) {
super(props);
//初始化的数据
this.state = {
dataValue: []
};
}

componentDidMount() {
//1.设置请求地址
fetch(“https://facebook.github.io/react-native/movies.json”)
//2.数据解析
.then(response => response.json())
//3.数据操作
.then(responseJson => {
/**
* 将数据添加到state状态机中刷新显示
*/
this.setState({
dataValue: responseJson.movies
});
})
//4.错误处理
.catch(error => {
console.warn(error);
});
}
//想要什么布局自己布
render() {
return (

<FlatList
//设置数据源
data={this.state.dataValue}
//设置要显示的Item条目
renderItem={({ item }) => (
<Text style={{ flex: 1, height: 50, textAlign: “center” }}>
标题：
{item.title}
日期：
{item.releaseYear}

)}
/>

);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: “center”,
alignItems: “center”,
backgroundColor: “#F5FCFF”
}
});