前言
本篇的内容可能是目前写的第二难的内容，第一难的内容当时是环境搭建，主要内容如下：
- fetch做网络请求
- 组件ListView
- ListView实现新闻列表
- ListView实现九宫格
一、fetch做网络请求
-
fetch其实是封装ES6中的网络请求方式Promise,有兴趣的可以去看看，我们这里直接使用fetch，请求方式如下
fetch("url",{ //请求方式 method:"post", //请求头 headers:{}, /*JSON.parse()用于从一个字符串中解析出json对象 JSON.stringify()用于从一个对象解析出字符串 body的类型是json串*/ body:json串 //response是响应体，此时无法直接获取到请求回来的数据，必须使用响应体的json函数来获取(这是异步过程)， }).then((response)=>response.json()) //上一个then函数的返回值给到下一个then中函数参数 .then((responseData)={ console.log(responseData); } //请求失败调用，catch必须放到最下面 .catch((error)={ console.log(error); }) -
上面原生fetch的写法感觉对程序员太不友好了，接下来我们使用对fetch进行二次封装的方式来处理
将对fetch的封装风放到MyNet.js文件中
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, } from 'react-native'; class NetUitl extends React.Component{ /* * get请求 * url:请求地址 * data:参数 * callback:回调函数 * */ static get(url,params,callback){ if (params) { let paramsArray = []; //拼接参数 Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key])) if (url.search(/\?/) === -1) { url += '?' + paramsArray.join('&') } else { url += '&' + paramsArray.join('&') } } //fetch请求 fetch(url,{ method: 'GET', }) .then((response) => { callback(response) }).done(); } /* * post请求 * url:请求地址 * data:参数 * callback:回调函数 * */ static post(url,params,headers,callback){ //fetch请求 fetch(url,{ method: 'POST', headers:{ 'token': headers }, body:JSON.stringify(params) }) .then((response) => { callback(response); }) .done(); } } module.exports = NetUitl;myNet的使用
- 首先引入myNet，一般在全局作用域内引入
var myNet = require("./xxxx/myNet.js");- myNet的使用
/* 因为myNet是从其他文件中引入进来的一个类，所以在myNet里面的this指的都是myNet组件的内容，而我们在修改demo1组件的状态时，需要用到demo1的this，因此这里声明个变量进行区分 */ var myThis = this; myNet.get("http://s.music.163.com/search/get",{type:1,s:"love"},function (result) { //这一部分的写法涉及到ES6中promise的用法，想搞懂这里的写法建议先研究promise，如果不想研究，那就记住吧 result.json().then((responseData)=>{ myThis.setState({ stateCode:"封装的fetch get方法"+responseData.code }) }) 代码示例
二、组件ListView
ListView组件是ReactNative中比较核心的组件，用途非常的广，该组件设计用来高效的展示垂直滚动的数据列表,也就是我们打开新闻软件时，能够上拉下拉的表。
-
常用属性
-
scrollView相关的属性、样式全部继承
-
initialListSize number
设置ListView组件刚刚加载的时候渲染的列表行数，用这个属性确定首屏或者首页加载的数量，而不是花大量的时间渲染加载很多页面数据，提高性能。
-
dataSource
设置ListView上的数据与,一般是个数组
-
renderRow function
返回值设置每一行的内容,该方法有四个参数，其中分别为数据源中一条数据，分组的ID，行的ID，以及标记是否是高亮选中的状态信息。如果函数没设置参数，四个参数都会传过去
-
contentContainerStyle
通常情况下，我们对ListView的操作是纵向的，如果是横向的，则需要设置ListView的contentContainerStyle属性，添加flexDirection:‘row’让多个ListView在同一行显示，而且通过flexWrap:'wrap'进行换行。
-
-
基本使用方式
-
创建一个ListView.DataSource数据源，然后给他传递一个普通的数据数组
getInitialState(){ //为了避免出现相同的两行 var ds = new ListView.DataSource({rowHasChanged:(r1,r2)=>r1 !== r2}); this.state = { dataSource:ds.cloneWithRows(data), } } -
使用数据源实例化一个IistView组件，定义一个renderRow回调函数，这个函数会接受数组中的每个数据作为参数，并返回一个可渲染的组件
render(){ return ( <ListView dataSource={this.state.dataSource} renderRow={(rowData)=><Text>{rowData}</Text>} > )}
-
三、ListView实现新闻列表
-
准备工作
-
准备如下的json数据,并放到一个json文件中
[ { "image": "img1", "money": "39", "name": "德国OETTINGER奥丁格大麦啤酒500ml*4罐/组" }, { "image": "img2", "money": "40", "name": "德拉克（Durlacher） 黑啤酒 330ml*6听" } ]
-
2. 准备一些图片放到andorid项目中的drawable文件夹
-
源码示例
四、ListView实现九宫格
-
准备工作
-
准备如下的json数据,并放到一个json文件中
{ "data" : [ { "icon" : "icon1", "title" : "广广分享" }, { "icon" : "icon2", "title" : "开心网分享" }, ] } 准备一些图片放到andorid项目中的drawable文件夹
-
-
源码示例
