RN请求豆瓣数据

此文适合react-native新手学习使用,侧重点在于Fetch网络请求、ListView数据源配置及展示。

项目中使用豆瓣网提供的开放数据接口 http://www.jianshu.com/p/c5160fda1d38

Util工具类封装 Util工具类封装了获取设备屏幕宽高、网络请求成功或者失败回调函数、数据请求成功前的等待效果.

/*
工具类
*/
import React, { Component} from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Dimensions, //用于获取设备屏幕的宽高
  ActivityIndicator
} from 'react-native';
var Util = {
  //屏幕尺寸
  windowSize: {
    width: Dimensions.get("window").width,
    height:Dimensions.get("window").height
  },
  getRequest: function(url,successCallback, failCallback) {
    fetch(url)
    .then((response) => response.json())
    .then((responseData) => successCallback(responseData))
    .catch((error) => failCallback(error));
  },
// loading效果
  loading:<ActivityIndicator style={{marginTop: 200}}/>
}
module.exports = Util;

数据请求部分

  getData: function() {
    this.setState({
      show: false
    });
    // 请求数据
    var that = this;
    //https://api.douban.com/v2/book/search?count=20&q=react
    var url = ServiceURL.book_search + "?count=20&q=" + this.state.keywords;
    Util.getRequest(url,function(data){
      // 请求成功回调
      if (!data.books || data.books.length == 0) {
        return alert("未查询到相关书籍")
      }
      var ds = new ListView.DataSource({
        rowHasChanged: (oldRow, newRow) => oldRow!==newRow
      });
      that.setState({
        show: true,
        dataSource: ds.cloneWithRows(data.books)
      });
    }, function(error){
      // 请求失败回调
      alert(error);
    })
  },

Demo下载地址 GitHub下载地址:https://github.com/dangxiaoyin/react-native-douban

原文发布于微信公众号 - 编程坑太多(idig88)

原文发表时间:2018-03-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员的SOD蜜

将ZIP文件添加到程序集资源文件然后在运行时解压文件

今天做安装打包程序研究,之前同事将很多零散的文件发布成一个安装文件夹给用户,这样体验不好,我希望将所有文件打包成一个.net程序,运行此程序的时候自解压然后执行...

2718
来自专栏技术墨客

React学习(7)—— 高阶应用:性能优化 原

在React内部已经使用了许多巧妙的技术来最小化由于Dom变更导致UI渲染所耗费的时间。对于很多应用来说,使用React后无需太多工作就会让客户端执行性能有质的...

1342
来自专栏恰童鞋骚年

ASP.Net WebForm温故知新学习笔记:一、aspx与服务器控件探秘

开篇:毫无疑问,ASP.Net WebForm是微软推出的一个跨时代的Web开发模式,它将WinForm开发模式的快捷便利的优点移植到了Web开发上,我们只要学...

2532
来自专栏谈补锅

WebViewJavascriptBridge源码探究--看OC和JS交互过程

      今天把实现OC代码和JS代码交互的第三方库WebViewJavascriptBridge源码看了下,oc调用js方法我们是知道的,系统提供了stri...

2405
来自专栏Golang语言社区

Go语言写Web 应用程序

介绍 涵盖内容: 为载入和保存方法创建一个数据结构体 引用http包来创建一个web应用 引用template包来处理HTML模板 引用regexp包来验证用户...

3264
来自专栏移动开发之家

Flutter完整开发实战详解(二、 快速开发实战篇)

 作为系列文章的第二篇,继《Flutter完整开发实战详解(一、Dart语言和Flutter基础)》之后,本篇将为你着重展示:如何搭建一个通用的Flutter ...

1.6K1
来自专栏哲学驱动设计

WPF架构学习总结

预期读者     1. 初学者。     2. 懒得总结的人。:)     3. 想大致了解WPF框架主要类的功能的人。 前言     学习WPF也有段时间了,...

2388
来自专栏一枝花算不算浪漫

ajax图片上传及FastDFS入门案例.

49411
来自专栏React

React和Redux——状态管理Flux和Redux

在强调组件化的React中,我们需要以高内聚、低耦合的原则设计高可复用性的组件。因此渲染组件的数据由两部分组成,一个是由父组件传入的Props参数、一个是组件的...

2817
来自专栏Python攻城狮

使用Selenium抓取QQ空间好友说说1.安装Selenium2.在Python中使用Selenium获取QQ空间好友说说3.代码实现(基于Python3)

通过Robo 3T(数据库MongoDB的一款功能强大的数据库管理工具)可以看到我们已经将拿到的数据库存储于数据库中

1092

扫码关注云+社区

领取腾讯云代金券