简单的小解析

最新推荐文章于 2019-07-16 22:06:29 发布

我去我去一窝去

最新推荐文章于 2019-07-16 22:06:29 发布

阅读量175

点赞数 1

本文链接：https://blog.csdn.net/Boom_1201/article/details/84207292

版权

JieXi


import React, { Component } from "react";
import { StyleSheet, Text, View, FlatList, Image } from "react-native";

//fetch网络加载,数据解析
export default class FetchDemo extends Component {
  constructor(props) {
    super(props);

    this.state = {
      arr: []
    };
  }

  componentDidMount() {
    //1.使用fetch网络加载
    fetch("https://facebook.github.io/react-native/movies.json")
      //2.当前then()用于：数据解析
      .then(response => response.json())
      //3.当前then()用户：数据处理
      .then(responseJson => {
        this.setState({
          arr: responseJson.movies
        });
      })
      //4.错误处理
      .catch(error => {
        console.warn(error);
      });
  }

  render() {
    return (
      <View>
        <FlatList
          //数据源（数组：对象类型）
          data={this.state.arr}
          //Item 页面显示
          renderItem={({ item }) => (
            <View
              style={{
                flexDirection: "row",
                justifyContent: "space-between",
                margin: 10
              }}
            >
              <Text style={styles.welcome}>{item.id}</Text>
              <Text style={styles.welcome}>{item.title}</Text>
              <Text style={styles.welcome}>{item.releaseYear}</Text>
            </View>
          )}
        />
      </View>
    );
  }
}