网络请求fetch和组件ListView

一、使用fetch做网络请求

   1. fetch其实是封装ES6中的网络请求方式Promise,有兴趣的可以去看看，我们这里直接使用fetch，请求方式如下

      fetch("url",{
        
         //请求方式
         method:"post",
         
         //请求头
         headers:{},
         
         /*JSON.parse()用于从一个字符串中解析出json对象

          JSON.stringify()用于从一个对象解析出字符串

           body的类型是json串*/
         body:json串

      //response是响应体，此时无法直接获取到请求回来的数据，必须使用响应体的json函数来获取(这是异步过程)，
      }).then((response)=>{response.json()})

      //上一个json函数得到的结果给到下一个then中函数参数
      .then((responseData)={

         console.log(responseData);

      }

      //请求失败调用，catch必须放到最下面
      .catch((error)={

         console.log(error);
      })


   2. 上面原生fetch的写法感觉对程序员太不友好了，接下来我们使用对fetch进行二次封装的方式来处理

       1) 封装fetch的文件及注释见《myNet》

       2) 使用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

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

   2. 常用属性

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


      2) initialListSize number

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

      3) dataSource

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

      4) renderRow function

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

      5) contentContainerStyle

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

   3. 基本使用方式

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

         getInitialState(){
            

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

            this.state = {
              
              dataSource:ds.cloneWithRows(data),
            }
         }

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

          render(){

            return (

                 <ListView

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

            )

             }