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取出来展示。

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

如有问题,欢迎指正。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2717
来自专栏落花落雨不落叶

canvas画简单电路图

63011
来自专栏菩提树下的杨过

Flash/Flex学习笔记(23):运动学原理

先写一个公用的小球类Ball: package{ import flash.display.Sprite; //小球 类 public class B...

25310
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

5526
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.2K7
来自专栏一个爱瞎折腾的程序猿

sqlserver使用存储过程跟踪SQL

USE [master] GO /****** Object: StoredProcedure [dbo].[sp_perfworkload_trace_s...

2070
来自专栏跟着阿笨一起玩NET

c#实现打印功能

2792
来自专栏张善友的专栏

LINQ via C# 系列文章

LINQ via C# Recently I am giving a series of talk on LINQ. the name “LINQ via C...

2655
来自专栏我和未来有约会

Kit 3D 更新

Kit3D is a 3D graphics engine written for Microsoft Silverlight. Kit3D was inita...

2576
来自专栏Ceph对象存储方案

Luminous版本PG 分布调优

Luminous版本开始新增的balancer模块在PG分布优化方面效果非常明显,操作也非常简便,强烈推荐各位在集群上线之前进行这一操作,能够极大的提升整个集群...

3165

扫码关注云+社区