前言
本篇的內(nèi)容可能是目前寫的第二難的內(nèi)容，第一難的內(nèi)容當(dāng)時(shí)是環(huán)境搭建，主要內(nèi)容如下：
- fetch做網(wǎng)絡(luò)請(qǐng)求
- 組件ListView
- ListView實(shí)現(xiàn)新聞列表
- ListView實(shí)現(xiàn)九宮格
一、fetch做網(wǎng)絡(luò)請(qǐng)求
-
fetch其實(shí)是封裝ES6中的網(wǎng)絡(luò)請(qǐng)求方式Promise,有興趣的可以去看看，我們這里直接使用fetch，請(qǐng)求方式如下
fetch("url",{ //請(qǐng)求方式 method:"post", //請(qǐng)求頭 headers:{}, /*JSON.parse()用于從一個(gè)字符串中解析出json對(duì)象 JSON.stringify()用于從一個(gè)對(duì)象解析出字符串 body的類型是json串*/ body:json串 //response是響應(yīng)體，此時(shí)無法直接獲取到請(qǐng)求回來的數(shù)據(jù)，必須使用響應(yīng)體的json函數(shù)來獲取(這是異步過程)， }).then((response)=>response.json()) //上一個(gè)then函數(shù)的返回值給到下一個(gè)then中函數(shù)參數(shù) .then((responseData)={ console.log(responseData); } //請(qǐng)求失敗調(diào)用，catch必須放到最下面 .catch((error)={ console.log(error); }) -
上面原生fetch的寫法感覺對(duì)程序員太不友好了，接下來我們使用對(duì)fetch進(jìn)行二次封裝的方式來處理
將對(duì)fetch的封裝風(fēng)放到MyNet.js文件中
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, } from 'react-native'; class NetUitl extends React.Component{ /* * get請(qǐng)求 * url:請(qǐng)求地址 * data:參數(shù) * callback:回調(diào)函數(shù) * */ static get(url,params,callback){ if (params) { let paramsArray = []; //拼接參數(shù) Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key])) if (url.search(/\?/) === -1) { url += '?' + paramsArray.join('&') } else { url += '&' + paramsArray.join('&') } } //fetch請(qǐng)求 fetch(url,{ method: 'GET', }) .then((response) => { callback(response) }).done(); } /* * post請(qǐng)求 * url:請(qǐng)求地址 * data:參數(shù) * callback:回調(diào)函數(shù) * */ static post(url,params,headers,callback){ //fetch請(qǐng)求 fetch(url,{ method: 'POST', headers:{ 'token': headers }, body:JSON.stringify(params) }) .then((response) => { callback(response); }) .done(); } } module.exports = NetUitl;myNet的使用
- 首先引入myNet，一般在全局作用域內(nèi)引入
var myNet = require("./xxxx/myNet.js");- myNet的使用
/* 因?yàn)閙yNet是從其他文件中引入進(jìn)來的一個(gè)類，所以在myNet里面的this指的都是myNet組件的內(nèi)容，而我們?cè)谛薷膁emo1組件的狀態(tài)時(shí)，需要用到demo1的this，因此這里聲明個(gè)變量進(jìn)行區(qū)分 */ 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中比較核心的組件，用途非常的廣，該組件設(shè)計(jì)用來高效的展示垂直滾動(dòng)的數(shù)據(jù)列表,也就是我們打開新聞軟件時(shí)，能夠上拉下拉的表。
-
常用屬性
-
scrollView相關(guān)的屬性、樣式全部繼承
-
initialListSize number
設(shè)置ListView組件剛剛加載的時(shí)候渲染的列表行數(shù)，用這個(gè)屬性確定首屏或者首頁加載的數(shù)量，而不是花大量的時(shí)間渲染加載很多頁面數(shù)據(jù)，提高性能。
-
dataSource
設(shè)置ListView上的數(shù)據(jù)與,一般是個(gè)數(shù)組
-
renderRow function
返回值設(shè)置每一行的內(nèi)容,該方法有四個(gè)參數(shù)，其中分別為數(shù)據(jù)源中一條數(shù)據(jù)，分組的ID，行的ID，以及標(biāo)記是否是高亮選中的狀態(tài)信息。如果函數(shù)沒設(shè)置參數(shù)，四個(gè)參數(shù)都會(huì)傳過去
-
contentContainerStyle
通常情況下，我們對(duì)ListView的操作是縱向的，如果是橫向的，則需要設(shè)置ListView的contentContainerStyle屬性，添加flexDirection:‘row’讓多個(gè)ListView在同一行顯示，而且通過flexWrap:'wrap'進(jìn)行換行。
-
-
基本使用方式
-
創(chuàng)建一個(gè)ListView.DataSource數(shù)據(jù)源，然后給他傳遞一個(gè)普通的數(shù)據(jù)數(shù)組
getInitialState(){ //為了避免出現(xiàn)相同的兩行 var ds = new ListView.DataSource({rowHasChanged:(r1,r2)=>r1 !== r2}); this.state = { dataSource:ds.cloneWithRows(data), } } -
使用數(shù)據(jù)源實(shí)例化一個(gè)IistView組件，定義一個(gè)renderRow回調(diào)函數(shù)，這個(gè)函數(shù)會(huì)接受數(shù)組中的每個(gè)數(shù)據(jù)作為參數(shù)，并返回一個(gè)可渲染的組件
render(){ return ( <ListView dataSource={this.state.dataSource} renderRow={(rowData)=><Text>{rowData}</Text>} > )}
-
三、ListView實(shí)現(xiàn)新聞列表
-
準(zhǔn)備工作
-
準(zhǔn)備如下的json數(shù)據(jù),并放到一個(gè)json文件中
[ { "image": "img1", "money": "39", "name": "德國OETTINGER奧丁格大麥啤酒500ml*4罐/組" }, { "image": "img2", "money": "40", "name": "德拉克（Durlacher） 黑啤酒 330ml*6聽" } ]
-
2. 準(zhǔn)備一些圖片放到andorid項(xiàng)目中的drawable文件夾
-
源碼示例
四、ListView實(shí)現(xiàn)九宮格
-
準(zhǔn)備工作
-
準(zhǔn)備如下的json數(shù)據(jù),并放到一個(gè)json文件中
{ "data" : [ { "icon" : "icon1", "title" : "廣廣分享" }, { "icon" : "icon2", "title" : "開心網(wǎng)分享" }, ] } 準(zhǔn)備一些圖片放到andorid項(xiàng)目中的drawable文件夾
-
-
源碼示例
