React Native 基础练习指北（二）

shixinzhang 发布于2019-08-21 10:29 / 3317人阅读

摘要：承接上文基础练习指北一，我们来看看如果通过接口获取线上数据并展示。如果使用无法刷新效果，请检查的权限设置。会在组件加载完成后，使用方法发送请求，并且只发送一次。牢记在最后要使用，否则不会出现错误提示。下一步在返回的对象中添加空的。

承接上文《React Native 基础练习指北（一）》，我们来看看React Native如果通过接口获取线上数据并展示。

Tips: 如果使用cmd+R无法刷新效果，请检查index.ios.js的权限设置。

一、展示单条数据

通常我们会在require("react-native");后，写好储存API的变量（此处我们使用简单的API做演示）：

var REQUEST_URL = "http://platform.sina.com.cn/sports_all/client_api?app_key=3571367214&_sport_t_=football&_sport_s_=opta&_sport_a_=teamOrder&type=213&season=2015&format=json";

这里我们暂时使用新浪体育2015年中超联赛信息的接口，可以得到中超16支球队2015赛季的相关信息（未经授权，悄悄的使用，打枪的不要）。

接下来，我们要添加一些初始化的状态，我们可以通过this.state.movies === null判断数据是否已经成功加载。将下面的代码加在render方法前面：

getInitialState: function() {
    return {
        teams: null,
    };
},

当react-native组件加载完成后，我们需要发送我们的请求。React会在react-native组件加载完成后，使用componentDidMount方法发送请求，并且只发送一次。

componentDidMount: function() {
    this.fetchData();
},

下面，我们需要添加fetchData方法，它是用来取回数据的。在React的工作流程中，setState会触发一次重绘，随后render方法会发现this.state.movies不再是null，你所需要做的就是使用this.setState({movies: data})。牢记在最后要使用done()，否则不会出现错误提示。

fetchData: function() {
    fetch(REQUEST_URL)
    .then((response) => response.json())
    .then((responseData) => {
        this.setState({
            teams: responseData.result.data,
        });
    })
    .done();
},

现在，我们需要修改render方法，从而当我们没有拿到数据时，渲染出一个loading视图，随后呈现出第一个球队信息。

render: function() {
    if (!this.state.teams) {
        return this.renderLoadingView();
    }

    var team = this.state.teams[11];
        return this.renderTeam(team);
},

renderLoadingView: function() {
    return (
        
            
                Loading teams...
            
        
    );
},

renderTeam: function(team) {
    return (
        
            
            
                {team.team_cn}
                {team.team_order}
            
        
    );
}

现在，在iOS模拟器中cmd+R，在请求拿到返回数据之前，你会看到“Loading teams...”，随后会渲染出第一个球队信息。

二、展示数据列表

下面我们来看看如何把所有数据展示在ListView组件中，而不是仅仅展示一条数据。

首先我们在最上面定义React的时候加入ListView：

var {
    AppRegistry,
    Image,
    ListView,
    StyleSheet,
    Text,
    View
} = React;

接下来，我修改render方法，从而能够以列表方式展示出数据：

render: function() {
    if (!this.state.loaded) {
      return this.renderLoadingView();
    }

    return (
      
    );
  },

ListView可以判断哪些数据发生了改变，并在数据更新时，体现在列表中。

我们不难发现，我们使用了this.state中的dataSource。下一步在getInitialState返回的对象中添加空的dataSource。随后，我们讲数据存到dataSource中，我不再使用this.state.movies来避免数据重复加载，而是使用布尔值this.state.loaded来判断数据是否成功获取。

getInitialState: function() {
    return {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
      loaded: false,
    };
  },

下面是完善后的fetchData方法：

fetchData: function() {
    fetch(REQUEST_URL)
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          dataSource: this.state.dataSource.cloneWithRows(responseData.result.data),
          loaded: true,
        });
      })
      .done();
  },

最后，我们把ListView的样式添加到styles对象中：

listView: {
    paddingTop: 20,
    backgroundColor: "#F5FCFF",
},

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85615.html

React Native 基础练习指北（一）

摘要：围观本文需自备，，以及。使用打开，并点击，会看到模拟器以及此项目对应的内容，效果如下如果想要修改显示内容，请打开，里面是一堆模样的东西。接下来，我们按照教程，来展示一张电影海报，为了方便，我们直接修改。原文链接：http://www.tinghaige.com/ 本着什么都要搀和的原则，一起来看看React Native是如何开发iOS APP。围观本文需自备Mac OSX ，...

nidaye 2019-08-21 10:29 评论0 收藏0
ES6指北【6】——详谈解构赋值【附赠练习题】

摘要：指北详谈解构赋值附赠练习题一何谓解构赋值基本概念首先我们看一下给的定义解构赋值语法是一个表达式，这使得可以将值从数组或属性从对象提取到不同的变量中从定义中，我们可以发现解构赋值的作用是对变量进行赋值主要通过两个方面实现这个作用数组将数组中的 ES6指北【6】——详谈解构赋值【附赠练习题】一、何谓解构赋值？ 1. 基本概念首先我们看一下MDN给的定义解构赋值语法是一个 Javasc...

sorra 2019-08-23 11:33 评论0 收藏0
AE动画转Web代码工具指北-Lottie

摘要：简单来说，就是一个可以将动画转成可运行在上的插件。使用工具使用前请确保已安装这以下工具。更详细内容可参考官网库最后再分项目框架提供两个的库简介 Lottie 是 Airbnb 开源的一套跨平台的完整的动画效果解决方案，设计师可以使用 Adobe After Effects 设计出漂亮的动画之后，使用 Lottic 提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式，...

SexySix 2019-08-23 17:14 评论0 收藏0
2017-10-19 前端日报

摘要：前端日报精选源码解析一组件的实现与挂载写在的前端数据层不完全指北非时圆角边框剪裁问题专题之解读排序源码中的闭包再也不用担心面试被问什么是闭包了中文路由路由基础入门实战操作详细指南前端学习教程用实现一门编程语言语言简介众成翻译第 2017-10-19 前端日报精选 React源码解析(一):组件的实现与挂载写在2017的前端数据层不完全指北Chrome opacity非1时border...

v1 2019-08-21 17:07 评论0 收藏0
Java unsafe操作指北

摘要：本文主要介绍下中的主要操作。所谓的内存屏障，是之虚拟机在对于这样的语句，在及后续写入操作执行前，保证的写入操作对其它处理器可见。是会插入的内存屏障，效率略低本篇为俺的课堂基础手写的前置知识，欢迎大家围观 Unsafe是Java无锁操作的基石，在无锁并发类中都少不了它们的身影，比如ConcurrentHashMap, ConcurrentLinkedQueue, 都是由Unsafe类来实...

StonePanda 2019-08-15 14:52 评论0 收藏0