ReactNative网络fetch数据并展示在listview中

Author Avatar
LiuZh 3月 02, 2017

看完全文并且do it你将收获：

  1. fetch获取网络数据的基本用法
  2. ListView的基本用法
  3. RN中组件的生命周期（有可能）

类似的实现其实有很多朋友已经写过了，我也看了几篇类似博客

这篇《react-native中listview获取豆瓣书本信息并展示出来》确实是一个值得学习的例子，但作者只是一步一步贴代码，没有很好的细讲

这篇《React Native从网络拉取数据并填充列表》写的不错，值得一看，不过listview没有图片，效果看起来没有我的有逼格（傲娇脸）

来，先看下最终我们要实现一个怎么样的效果吧：
实现效果

好，正题开始：

要展示出这样一个listview的效果，首先需要有数据源，我这里私藏了两个能返回json（带有图片地址）的url：

url最后的数字是返回数据的数量，可以自己修改
比如第一个url将返回30条数据，第二个url将返回3条

  1. http://www.imooc.com/api/teacher?type=4&num=30
  2. https://api.douban.com/v2/book/search?q=react&count=3

我们先看一看返回的json长啥样，在浏览器中输入url后：

我使用的是chrome浏览器，通过插件“JSON-handle”将json格式化并展示了出来，很友好的效果，其他浏览器也有类似插件，可自行搞定

在浏览器中看到的json数据

果然是好长一段的json！我们需要的内容在json>data中，对比预览图得知需要的数据段为：name、picSmall(当然用小图啦)、description三个。

OK，既然有了数据源，那么接下来要做的就是通过网络请求去获取数据

RN中的网络请求通过Fetch进行，最简单的fetch写法是传入一个url参数：

fetch('http://www.imooc.com/api/teacher?type=4&num=30');

通过这一句就成功发起了一个网络请求，当然fetch方法还有第二个可选参数，这个参数用于传入一些HTTP请求的参数如：headers、请求方式(GET/POST)等
援引RN中文网fetch一段示例代码：

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

仅用于获取简单的数据则完全可以忽略第二个参数

在用fetch请求网络成功后，会返回的是一个Promise对象，用于检索我们需要的数据，但我们需要的是一个json对象来便于处理数据，那么怎样将这个Promise对象转换成json对象呢？fetch有非常方便的链式调用方法来搞定：

    fetch('https://mywebsite.com/endpoint/')
    .then((response) => response.json());//response就是fetch返回的Promise对象

    //.then()中传入一个回调函数，该回调函数接收fetch返回的对象
    //你可以在这个时候将Promise对象转换成json对象:response.json()
    //转换成json对象后return，给下一步的.then处理

没错！.then可以一直接下去！并且每一个.then都接收一个回调函数，这个回调函数都接收上一个.then返回的数据，这样做数据处理岂不是美滋滋！

ok，既然这样，那我们在下一个.then中接收到这个由上一个.then返回的json对象，并将他设置给this.state以便于后面的使用：

  constructor(props){
    super(props);

    this.state = {
      data: null,
    };
  }

  componentDidMount(){
    fetch('http://www.imooc.com/api/teacher?type=4&num=30')
    .then((response) => response.json())
    .then((jsonData) => {        //jsonData就是上一步的response.json()
      this.setState({
        data: jsonData.data,     //data是一个对象数组
      });
    })                           //你后面还可以继续疯狂的接.then并且传递数据，尽管试试吧！
    .catch((error) => {          //注意尾部添加异常回调
      alert(error);
    });
  }
//上一个.then的回调函数返回的数据，由下一个.then的回调函数接收

为啥把fetch写在componentDidMount()中呢，因为这是一个RN中组件的生命周期回调函数，会在组件渲染后回调
关于更多组件生命周期戳React Native 中组件的生命周期

那么我们最终得到的this.state.data到底长啥样的？根据json结构来分析一下，json.data是一个对象数组，现在赋给了this.state.data，那么this.state.data应该就是一个对象数组，我们来检测一下：

  componentDidMount(){
    fetch('http://www.imooc.com/api/teacher?type=4&num=30')
    .then((response) => response.json())
    .then((jsonData) => {
      this.setState({
        data: jsonData.data,
      });
      let n = this.state.data[0].name;
      let d = this.state.data[0].description;
      alert("n:" + n + ",d:" + d);
    })
    .catch((error) => {
      alert(error);
    });
  }

double r:

提取data中的数据
很好，这说明data是一个对象数组，通过数组取值方法取到了值，结构看json那边，这样就很好的可以取到其中的值

data中的第一条数据

关于更多详细的fetch介绍可以自行G/B，也墙裂建议认真看看、理解fetch

拿到了数据，接下来开始使用listview了

首先得导入ListView组件（我很容易忘记导入组件），接下来就是把它写在布局中
使用的时候，有两个必须参数：dataSource、renderRow

<ListView
  dataSource={}      //必须写此属性并且传入dataSource对象
  renderRow={}>      //必须写此属性并且传入一个返回component的回调函数
</ListView>

这个很容易理解，listview要展示数据，必须得有数据源(dataSource)，之后listview必须知道他每一行长啥样，他才能去渲染(renderRow)
dataSource
dataSource是ListView下的一个类，新建一个dataSource:

let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
//DataSource()可以接收四种参数
//rowHasChanged就是渲染每一行的依据，r1是上一行的数据，r2是下一行的数据
//此处定义：r1和r2不同时，需要渲染新的一行

关于DataSource可接收四种参数：

  1. getRowData(dataBlob, sectionID, rowID)：表明我们将以何种方式从dataBlob（数据源）中提取出rowData，sectionID用于指定每一个section的标题名（在renderRow，renderHeader等方法中会默认拆开并作为参数传入）
  2. getSectionHeaderData(dataBlob, sectionID)：表明我们将以何种方式从dataBlob（数据源）中提取出HeaderData。HeaderData用于给每一个sectionHeader赋值
  3. rowHasChanged(prevRowData, nextRowData)：指定我们更新row的策略，一般来说都是prevRowData和nextRowData不相等时更新row
  4. sectionHeaderHasChanged(prevSectionData, nextSectionData)：指定我们更新sectionHeader的策略，一般如果用到sectionData的时候才指定

引自：React-Native组件用法详解之ListView
==========本次Demo实现只需要用到rowHasChanged
墙裂建议认真学习更多listview详细内容

这个时候我们创建出来的ds还并不拥有任何数据，在传给listview之前还要进行一个步骤：

let lvData = ds.cloneWithRows(this.state.data);
//可以粗暴理解为：将this.state.data克隆到lvData，只有经过这一步的数据才能给listview使用

我们希望网络请求到数据时立即进行cloneWithRows这一步，这样this.state.data在网络请求完成后就直接被赋值成为可以传递给listview的对象：

    fetch('http://www.imooc.com/api/teacher?type=4&num=30')
    .then((response) => response.json())
    .then((jsonData) => {
      this.setState({
        data: new ListView.DataSource({rowHasChanged: (r1,r2) => r1!==r2 }).cloneWithRows(jsonData.data),
      });
    })
    .catch((error) => {
      alert(error);
    });

renderRow
<listview>的renderRow属性接收一个“返回每一行的组件的回调函数”，该回调函数接收一个分配给该行的数据，在本例中即为json.data中的子项
OK，既然知道renderRow需要啥，并且知道每一行长啥样：

listview的一行的样式

我们就可以根据这个样式来写一个需要的回调函数：

export default class lvtest extends Component {

………………
  // 返回listview的一行
  renderRow(rowData){//参数为接收的每一行的数据，理解：数组data的子项
    return(
      <View                                //最外层包裹的View
        style = {styles.lvRow}>
          <Image                           //左侧显示的图片
            style = { styles.img }
            source = { { uri: rowData.picSmall } }/>//source为rowData中的picSmall，
                                                    //致于你换rowData.picBig也行，更消耗流量加载慢就是
        <View                              //包裹文本的View
          style = { styles.textView }>
          <Text                            //标题
            style = { styles.textTitle }
            numberOfLines = { 1 }>         //只显示一行
            { rowData.name }               //取rowData中的name字段,理解:data[某行].name
                                  //注意：this.state.data不能直接当做数组使用，他是一个dataSource对象
          </Text>
          <Text                //详细内容文本
            style = { styles.textContent }>
            { rowData.description }        //取rowData中的description字段,理解:data[某行].description
          </Text>
        </View>
      </View>
    )
  }
}
//样式，
const styles = StyleSheet.create({
  lvRow: {
    flex: 1,
    flexDirection: 'row',
    padding: 10,
  },
  textView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 5,
  },

  textTitle: {
    flex: 1,
    textAlign: 'center',
    color: '#f00',
  },

  textContent: {
    flex: 1,
    fontSize: 11,
    color: '#000',
    textAlign: 'center',
  },

  img: {
    height: 55,
    width: 100,
  }
});

除了rowData.name、rowData.description、rowData.picSmall，我相信大家都很容易看明白这个布局的实现，至此我们所有的代码如下：（还有个坑呢，继续看完！）

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


export default class lvtest extends Component {

  constructor(props){
    super(props);
    this.state = {
      data: null,
    };
  }

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


// 生命周期回调函数,在其中进行网络请求
  componentDidMount(){
    fetch('http://www.imooc.com/api/teacher?type=4&num=30')
    .then((response) => response.json())
    .then((jsonData) => {
      this.setState({
        data: new ListView.DataSource({rowHasChanged: (r1,r2) => r1!==r2 }).cloneWithRows(jsonData.data),
      });
    })
    .catch((error) => {
      alert(error);
    });
  }
  // 返回listview的一行
  renderRow(rowData){
    return(
      <View 
        style = {styles.lvRow}>
          <Image 
            style = { styles.img }
            source = { { uri: rowData.picSmall } }/>
        <View 
          style = { styles.textView }>
          <Text
            style = { styles.textTitle }
            numberOfLines = { 1 }>
            { rowData.name }
          </Text>
          <Text
            style = { styles.textContent }>
            { rowData.description }
          </Text>
        </View>
      </View>
    )
  }
}



const styles = StyleSheet.create({
  lvRow: {
    flex: 1,
    flexDirection: 'row',
    padding: 10,
  },
  textView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 5,
  },

  textTitle: {
    flex: 1,
    textAlign: 'center',
    color: '#f00',
  },

  textContent: {
    flex: 1,
    fontSize: 11,
    color: '#000',
    textAlign: 'center',
  },

  img: {
    height: 55,
    width: 100,
  }
});

AppRegistry.registerComponent('lvtest', () => lvtest);

当我怀着无比期待的心情double r之后：

疯狂报错

仔细一看，咦，貌似说dataSource为空，我不是通过fetch获取到了数据并且clone给了this.state.data吗？怎么会是空呢？

通过你不懈的排查发现，原来是这里的问题：

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

APP一启动，马上就要渲染ListView，而fetch数据是一个耗时操作，在启动APP的一瞬间this.state.data肯定是没有数据的！所以在渲染listview时提取数据，发现你传给他的dataSource居然是个空的，那他当然不干，要给你报红了！

既然知道哪里错了，那就来解决一下：

  render() {
    if(!this.state.data){//如果this.state.data没有数据(即网络请求未完成),则返回一个加载中的文本
      return(
          <Text>loading...</Text>
      );
    } else {//当this.state.data有了数据，则渲染ListView
      return (
        <ListView
          dataSource={this.state.data}
          renderRow={(rowData) => this.renderRow(rowData)}>
        </ListView>
      );
    }
  }

OK，这个时候再来double r跑一下：

究极形态

到此，我们就很完美的实现了这样一个小demo，致于最顶端那个预览有点击效果，你可以在renderRow中的布局里，通过包裹来实现，还有很多可玩性等你do it！

下面附上整个【index.android.js】代码：

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


export default class lvtest extends Component {

  constructor(props){
    super(props);

    this.state = {
      data: null,
    };
  }

  render() {
    if(!this.state.data){
      return(
          <Text>loading...</Text>
      );
    } else {
      return (
        <ListView
          dataSource={this.state.data}
          renderRow={(rowData) => this.renderRow(rowData)}>
        </ListView>
      );
    }
  }

// 生命周期回调函数
  componentDidMount(){
    fetch('http://www.imooc.com/api/teacher?type=4&num=30')
    .then((response) => response.json())
    .then((jsonData) => {
      this.setState({
        data: new ListView.DataSource({rowHasChanged: (r1,r2) => r1!==r2 }).cloneWithRows(jsonData.data),
      });
    })
    .catch((error) => {
      alert(error);
    });
  }


  // 返回listview的一行
  renderRow(rowData){
    return(
      <View 
        style = {styles.lvRow}>
          <Image 
            style = { styles.img }
            source = { { uri: rowData.picSmall } }/>
        <View 
          style = { styles.textView }>
          <Text
            style = { styles.textTitle }
            numberOfLines = { 1 }>
            { rowData.name }
          </Text>
          <Text
            style = { styles.textContent }>
            { rowData.description }
          </Text>
        </View>
      </View>
    )
  }
}



const styles = StyleSheet.create({
  lvRow: {
    flex: 1,
    flexDirection: 'row',
    padding: 10,
  },
  textView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 5,
  },

  textTitle: {
    flex: 1,
    textAlign: 'center',
    color: '#f00',
  },

  textContent: {
    flex: 1,
    fontSize: 11,
    color: '#000',
    textAlign: 'center',
  },

  img: {
    height: 55,
    width: 100,
  }
});

AppRegistry.registerComponent('lvtest', () => lvtest);
expand_less