前言

本篇的内容可能是目前写的第二难的内容，第一难的内容当时是环境搭建，主要内容如下：

• 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的使用

  1. 首先引入myNet，一般在全局作用域内引入

  var myNet = require("./xxxx/myNet.js");
  

  2. 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中比较核心的组件，用途非常的广，该组件设计用来高效的展示垂直滚动的数据列表,也就是我们打开新闻软件时，能够上拉下拉的表。

• 常用属性

  1. scrollView相关的属性、样式全部继承

  2. initialListSize number

     设置ListView组件刚刚加载的时候渲染的列表行数，用这个属性确定首屏或者首页加载的数量，而不是花大量的时间渲染加载很多页面数据，提高性能。

  3. dataSource

     设置ListView上的数据与,一般是个数组

  4. renderRow function

     返回值设置每一行的内容,该方法有四个参数，其中分别为数据源中一条数据，分组的ID，行的ID，以及标记是否是高亮选中的状态信息。如果函数没设置参数，四个参数都会传过去

  5. contentContainerStyle

     通常情况下，我们对ListView的操作是纵向的，如果是横向的，则需要设置ListView的contentContainerStyle属性，添加flexDirection:‘row’让多个ListView在同一行显示，而且通过flexWrap:'wrap'进行换行。

• 基本使用方式

  1. 创建一个ListView.DataSource数据源，然后给他传递一个普通的数据数组

     getInitialState(){
      
          //为了避免出现相同的两行
          var ds = new ListView.DataSource({rowHasChanged:(r1,r2)=>r1 !== r2});
     
          this.state = {
            dataSource:ds.cloneWithRows(data),
          }
     }
     

  2. 使用数据源实例化一个IistView组件，定义一个renderRow回调函数，这个函数会接受数组中的每个数据作为参数，并返回一个可渲染的组件

      render(){
     
            return (
                  <ListView 
                    dataSource={this.state.dataSource}   
                    renderRow={(rowData)=><Text>{rowData}</Text>}
                  >
            )
     

     }

三、ListView实现新闻列表

• 准备工作

  1. 准备如下的json数据,并放到一个json文件中

     [
        {
            "image": "img1",
            "money": "39",
            "name": "德国OETTINGER奥丁格大麦啤酒500ml*4罐/组"
        },
     
        {
            "image": "img2",
             "money": "40",
             "name": "德拉克（Durlacher） 黑啤酒 330ml*6听"
        }
     ]
     

 2. 准备一些图片放到andorid项目中的drawable文件夹

• 源码示例

  

四、ListView实现九宫格

• 准备工作

  1. 准备如下的json数据,并放到一个json文件中

      {
          "data" : [
                {
                   "icon" : "icon1",
                   "title" : "广广分享"
                },
                {
                  "icon" : "icon2",
                  "title" : "开心网分享"
                },
         ]
      }
     

  2. 准备一些图片放到andorid项目中的drawable文件夹

• 源码示例