React Native的列表显示

前言

在一个移动App中，我们最常用的内容展现形式就是列表。今天，我们尝试用React Native完成对列表的开发。

ListView

ListView作为一个React Native官方提供的控件，我们需要了解它的属性。

dataSource

是列表的数据源，通常以一个数组的形式传给ListView。

renderRow

是列表的表现层，我们可以获得dataSource的单项数据，然后用于单项渲染。

官方例子

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

class ListViewBasics extends Component {
  // 初始化模拟数据
  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={{flex: 1, paddingTop: 22}}>
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <Text>{rowData}</Text>}
        />
      </View>
    );
  }
}

// 注册应用(registerComponent)后才能正确渲染
// 注意：只把应用作为一个整体注册一次，而不是每个组件/模块都注册
AppRegistry.registerComponent('ListViewBasics', () => ListViewBasics);

我们可以看到官方例子的数据比较简单，就是一个字符串的数组，将它在构造方法中，加入到state中。在render方法中，我们即可在renderRow中，渲染我们每项的界面。

自己的一个例子

需求：

请求https://facebook.github.io/react-native/movies.json，将返回数据的电影列表显示出来。

code

ListViewBisc.js

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


class ListViewBisc extends Component {
  constructor(props) {
    super(props);
    // Initial of data of ListView
    this.state={
      ds:new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}),
    };
  }
  // Render ListView
  render(){
    if (this.props.movies) {
      var dataSource = this.state.ds.cloneWithRows(this.props.movies);
      return(
        <View style={{flex: 1, paddingTop: 22}}>
          <ListView
            dataSource={dataSource}
            renderRow={(movie) => <Text>{movie.title}</Text>}
          />
        </View>
      )
    }else {
      return <Text>Loading</Text>
    }
  }
}
export default ListViewBisc;

index.android.js

import React, { Component } from 'react';
import {
  AppRegistry,
  View,

} from 'react-native';

import ListViewBisc from '../AwesomeProject/App/widget/ListViewBisc'
import HttpClient from '../AwesomeProject/App/widget/HttpClient'

class HelloWorld extends Component {
  render(){
    return (
      <Text>{this.state.title}</Text>
    )
  }

  constructor(props) {
    super(props);
    this.state={
      title:'loading',
    };
    var self = this;
    var httpUrl = 'https://facebook.github.io/react-native/movies.json';
    HttpClient.requestAsync(httpUrl , function(responseJson){
      self.setState({
        title:responseJson.title,
        movies:responseJson.movies,
      })
    });
  }



  render() {

    return (
      <View style={{width:400 , height:1000}}>
        <ListViewBisc movies={this.state.movies}></ListViewBisc>
      </View>

    );
  }
}


AppRegistry.registerComponent('AwesomeProject', () => HelloWorld);

结合前面讲到的state的作用，我们就不难理解。我们在网络的回调中修改state，然后在render方法中，将state中的movies以props的形式传入<ListViewBisc>中。

然后在ListViewBisc中，将movie的title取出来展示。

至此，我们就走完了，从网络请求到列表显示的完整流程。

如有问题，欢迎指正。