本文共 1451 字,大约阅读时间需要 4 分钟。
此文适合react-native新手学习使用,侧重点在于Fetch网络请求、ListView数据源配置及展示。
项目中使用豆瓣网提供的开放数据接口
http://www.jianshu.com/p/c5160fda1d38
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:}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); }) },
百度授课react-native零基础入门到项目实战:
GitHub下载地址:
转载地址:http://lseni.baihongyu.com/