前言

本篇的內容可能是目前寫的第二難的內容，第一難的內容當時是環境搭建，主要內容如下：

• 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文件夾

• 源碼示例