React Native從網(wǎng)絡(luò)拉取數(shù)據(jù)并填充列表

本文工作，涉及到以下幾個(gè)知識點(diǎn)

  • 請求網(wǎng)絡(luò)并得到數(shù)據(jù)
  • 創(chuàng)建Button并觸發(fā)按鈕事件測試網(wǎng)絡(luò)
  • 創(chuàng)建列表listview
  • 創(chuàng)建CELL
  • 根據(jù)返回的數(shù)據(jù)填充CELL

使用Fetch請求網(wǎng)絡(luò)

React Native提供了和web標(biāo)準(zhǔn)一致的Fetch API，用于滿足開發(fā)者訪問網(wǎng)絡(luò)的需求。如果你之前使用過XMLHttpRequest(即俗稱的ajax)或是其他的網(wǎng)絡(luò)API，那么Fetch用起來將會(huì)相當(dāng)容易上手。這篇文檔只會(huì)列出Fetch的基本用法，并不會(huì)講述太多細(xì)節(jié)，你可以使用你喜歡的搜索引擎去搜索fetch api關(guān)鍵字以了解更多信息。

發(fā)起網(wǎng)絡(luò)請求

要從任意地址獲取內(nèi)容的話，只需簡單地將網(wǎng)址作為參數(shù)傳遞給fetch方法即可（fetch這個(gè)詞本身也就是獲取的意思）：

fetch('https://mywebsite.com/mydata.json')

Fetch還有可選的第二個(gè)參數(shù)，可以用來定制HTTP請求一些參數(shù)。你可以指定header參數(shù)，或是指定使用POST方法，又或是提交數(shù)據(jù)等等：
提供兩個(gè)可用的url，返回json
http://facebook.github.io/react-native/movies.json
http://bbs.reactnative.cn/api/category/3
可以替換下面的url

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  })
})

TIPS:本人用的是xcode8做測試，遇到網(wǎng)絡(luò)請求不通的情況，解決方法是在info.plist加入一項(xiàng)允許http的請求，這是由于兼容ios9+的一種方式，通過看控制臺的log知道訪問的結(jié)果.
查看測試結(jié)果也可以利用工具Charles

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
</plist>

創(chuàng)建按鈕并觸發(fā)事件 TouchableHighlight

由于RN的特點(diǎn)，沒有直接對Button封裝出來，但是有可用的可點(diǎn)擊組件，會(huì)相應(yīng)點(diǎn)擊事件。
中文網(wǎng)TouchableHightlight介紹
本組件用于封裝視圖，使其可以正確響應(yīng)觸摸操作。當(dāng)按下的時(shí)候，封裝的視圖的不透明度會(huì)降低，同時(shí)會(huì)有一個(gè)底層的顏色透過而被用戶看到，使得視圖變暗或變亮。在底層實(shí)現(xiàn)上，實(shí)際會(huì)創(chuàng)建一個(gè)新的視圖到視圖層級中，如果使用的方法不正確，有時(shí)候會(huì)導(dǎo)致一些不希望出現(xiàn)的視覺效果。譬如沒有給視圖的backgroundColor顯式聲明一個(gè)不透明的顏色。

例子：

renderButton: function() {
  return (
    <TouchableHighlight onPress={this._onPressButton}>
      <Image
        style={styles.button}
        source={require('./button.png')}
      />
    </TouchableHighlight>
  );
},

注意：TouchableHighlight只支持一個(gè)子節(jié)點(diǎn)

如果你希望包含多個(gè)子組件，用一個(gè)View來包裝它們。

所以結(jié)合上面的網(wǎng)絡(luò)請求，我們的按鈕觸發(fā)事件可以這樣寫

  buttonTap=()=>{ 

    fetch( 'http://bbs.reactnative.cn/api/category/3')
   .then((response)=>response.json())
    .then((jsondata) =>{
        console.log(jsondata); 
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
   
        this.setState({dataSource: ds.cloneWithRows(jsondata.topics)});
        this.setState({title:jsondata.description});
         //alert(jsondata);
    })
    .catch((error)=>{
      alert(error);
      console.warning(error);
    });
  };

按鈕的布局代碼

  render() {
    return (
      <View style={[styles.container,{paddingTop: 22}]}>
          <TouchableHighlight style={{alignSelf:'flex-start'}} onPress={this.buttonTap} >
          <Image
            style={styles.button}
            source={require('./img/favicon.png')}
          />
    );
}

創(chuàng)建ListView

ListView組件用于顯示一個(gè)垂直的滾動(dòng)列表，其中的元素之間結(jié)構(gòu)近似而僅數(shù)據(jù)不同。

ListView更適于長列表數(shù)據(jù)，且元素個(gè)數(shù)可以增刪。和ScrollView不同的是，ListView并不立即渲染所有元素，而是優(yōu)先渲染屏幕上可見的元素。

ListView組件必須的兩個(gè)屬性是dataSource和renderRow。dataSource是列表的數(shù)據(jù)源，而renderRow則逐個(gè)解析數(shù)據(jù)源中的數(shù)據(jù)，然后返回一個(gè)設(shè)定好格式的組件來渲染。

下面的例子創(chuàng)建了一個(gè)簡單的ListView，并預(yù)設(shè)了一些模擬數(shù)據(jù)。首先是初始化ListView所需的dataSource，其中的每一項(xiàng)（行）數(shù)據(jù)之后都在renderRow中被渲染成了Text組件，最后構(gòu)成整個(gè)ListView。

rowHasChanged函數(shù)也是ListView的必需屬性。這里我們只是簡單的比較兩行數(shù)據(jù)是否是同一個(gè)數(shù)據(jù)（===符號只比較基本類型數(shù)據(jù)的值，和引用類型的地址）來判斷某行數(shù)據(jù)是否變化了。

import React, { Component } from 'react';
import { AppRegistry, ListView, Text, View } from 'react-native';

class ListViewBasics extends Component {
  // 初始化模擬數(shù)據(jù)
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows([
        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
      ])
    };
  }
  render() {
    return (
      <View style={{paddingTop: 22}}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <Text>{rowData}</Text>}
        />
      </View>
    );
  }
}

// 注冊應(yīng)用(registerComponent)后才能正確渲染
// 注意：只把應(yīng)用作為一個(gè)整體注冊一次，而不是每個(gè)組件/模塊都注冊
AppRegistry.registerComponent('ListViewBasics', () => ListViewBasics);

以上介紹了一個(gè)簡單的ListView ，然而現(xiàn)實(shí)中的CELL并沒有如此簡單，我們需要重構(gòu)CELL的組織方式

創(chuàng)建展示的CELL

如果學(xué)過RN的布局方式，定制化CELL就是個(gè)簡單的事情，此處需要用到alighitmes，justifycontent，具體的可以參考 React Native 的布局方式flextbox

直接給出代碼


class CELL extends Component{

  constructor(props){
    super(props);
    this.state = { detailTitle:'aaaa'};
  }
  render(){
    return(
          <View style={{flexDirection: 'column', backgroundColor:'#F5DD00'}}>
              <View style={{flexDirection: 'row',padding:10, justifyContent:'center',flex:1,alignItems:'center'}} >
                <Text style={{flex:2 ,marginLeft:10,marginRight:10,fontSize: 15}} >{this.props.title}</Text>
                <Text style={{flex:1,marginRight:10,color:'gray',fontSize: 12,textAlign:'right'}}>{this.props.detailTitle}</Text>
              </View>
              <View style={{height:.5,alignSelf:'stretch',backgroundColor:'gray'}}></View>
          </View>
      );
  }
}

要實(shí)現(xiàn)以上的需求，效果圖如下

Paste_Image.png
  • 大伙可以先不看代碼，自己組織代碼試一下！
  • 有問題歡迎在下面留言
  • 不要吝嗇自己的喜歡，有用的話點(diǎn)個(gè)贊吧

源代碼如下：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TextInput,
  Image,
  View,ScrollView,
  ListView,
  TouchableHighlight,
} from 'react-native';


class RNCSDemo extends Component {
  // 初始化模擬數(shù)據(jù)
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows([
        // 'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
      ])
    };
    this.buttonTap();//初始化
  }

 getMoviesFromApiAsync() {
    return fetch('http://facebook.github.io/react-native/movies.json',
      {
        headers:{
          'Accept': 'application/json',  
          'Content-Type':'application/json', 
        }
      })
      .then((response) => response.json())
      .then((responseJson) => {
        return responseJson.movies;
      })
      .catch((error) => {
        console.error(error);
      });
  }

  buttonTap=()=>{ 

    fetch( 'http://bbs.reactnative.cn/api/category/3'
      // , {
        // method: 'GET',
        // headers: {
          // 'Accept': 'application/json',
          // 'Content-Type': 'application/json',
        // },
        // body: JSON.stringify({ 
        // } )
    // }
    ).then((response)=>response.json())
    .then((jsondata) =>{
        console.log(jsondata); 
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
   
        this.setState({dataSource: ds.cloneWithRows(jsondata.topics)});
        this.setState({title:jsondata.description});
         //alert(jsondata);
    })
    .catch((error)=>{
      alert(error);
      console.warning(error);
    });

  };
  render() {

    return (
      <View style={[styles.container,{paddingTop: 22}]}>
          <TouchableHighlight style={{alignSelf:'flex-start'}} onPress={this.buttonTap} >
          <Image
            style={styles.button}
            source={require('./img/favicon.png')}
          />
        </TouchableHighlight>
        <Text  style={{textAlign:'center',alignSelf:'center'}} >{this.state.title}</Text>
        <ListView style={{flex:5}}
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <CELL title={rowData.title} detailTitle={rowData.timestampISO}></CELL>}
        />
      </View>
    );
}
}

class CELL extends Component{

  constructor(props){
    super(props);
    this.state = { detailTitle:'aaaa'};
  }
  render(){
    return(
          <View style={{flexDirection: 'column', backgroundColor:'#F5DD00'}}>
              <View style={{flexDirection: 'row',padding:10, justifyContent:'center',flex:1,alignItems:'center'}} >
                <Text style={{flex:2 ,marginLeft:10,marginRight:10,fontSize: 15}} >{this.props.title}</Text>
                <Text style={{flex:1,marginRight:10,color:'gray',fontSize: 12,textAlign:'right'}}>{this.props.detailTitle}</Text>
              </View>
              <View style={{height:.5,alignSelf:'stretch',backgroundColor:'gray'}}></View>
          </View>
      );
  }
}

const styles= StyleSheet.create({ 

  container:{flex:1,
    justifyContent:'center',
    backgroundColor: '#F5FC00',}
});


AppRegistry.registerComponent('RNCSDemo', () => RNCSDemo);
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容