React Native 基础练习指北(二)

承接上文《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 (
        <View style={styles.container}>
            <Text>
                Loading teams...
            </Text>
        </View>
    );
},

renderTeam: function(team) {
    return (
        <View style={styles.container}>
            <Image
                source={{uri: team.logo}}
                style={styles.thumbnail}
            />
            <View style={styles.rightContainer}>
                <Text style={styles.name}>{team.team_cn}</Text>
                <Text style={styles.rank}>{team.team_order}</Text>
            </View>
        </View>
    );
}

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

demo-1

二、展示数据列表

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

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

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

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

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

    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={this.renderScoreboard}
        style={styles.listView} />
    );
  },

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',
},

demo-2


前端开发实习生

522 声望
39 粉丝
0 条评论
推荐阅读
单文件组件下的vue,可以擦出怎样的火花
与时俱进吧,看着 vue3 和 vite,虽然不会用,但还是心痒痒,然后就把原先基于 vue@2 的实现做了重构。不周之处,大家见谅!下面关于过期的内容,我就用删除线标记了。

leftstick65阅读 45.2k评论 18

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木150阅读 12.4k评论 10

正则表达式实例
收集在业务中经常使用的正则表达式实例,方便以后进行查找,减少工作量。常用正则表达式实例1. 校验基本日期格式 {代码...} {代码...} 2. 校验密码强度密码的强度必须是包含大小写字母和数字的组合,不能使用特殊...

寒青56阅读 7.9k评论 11

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 6k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.2k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs40阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木44阅读 7.4k评论 6

前端开发实习生

522 声望
39 粉丝
宣传栏