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 条评论
登录 后参与评论

相关文章

来自专栏向治洪

安全退出app,activoty栈管理

前言 由于一个同学问到我如何按照一个流程走好之后回到首页,我以前看到过4个解决方案,后来发现有做个记录和总结的必要,就写了这篇博文。(之前看小强也写过一篇,这...

25010
来自专栏Android相关

Android-VideoView中的一些问题

使用TextureView替换SurfaceView实现VideoView,因为TextureView是直接继承View的,并且在ListView中滑动的时候,...

1143
来自专栏緣來來來

安卓基础干货(七):安卓广播的学习

android应用程序里面的电台:系统内置的一个服务,会把事件(电量不足、电量充满、开机启动完成)作为一个广播消息发送其他的接收者;

591
来自专栏函数式编程语言及工具

Akka(38): Http:Entityof ByteString-数据传输基础

  我们说过Akka-http是一个好的系统集成工具,集成是通过数据交换方式实现的。Http是个在网上传输和接收的规范协议。所以,在使用Akka-http之前,...

1939
来自专栏项勇

笔记39 | 数据存储之SharedPreferences的介绍及使用

1284
来自专栏吴小龙同學

android之获取手机信息

android获取手机信息(号码,内存,CPU,分辨率,MAC,IP,SD卡,IMEI,经纬度,信号强度等等) 1 2 3 4 5 6 7 8 9 10 11 ...

3477
来自专栏生信宝典

分子对接简明教程 (4)

文件格式解释 PDB文件 (详细格式描述) 基本信息部分 HEADER记录: 包括分子的分类、提交日期、PDB ID TITLE记录: 为该结构的描述,如果有多...

2047
来自专栏林德熙的博客

C# 对 byte 数组进行模式搜索

最简单的方法是进行数值判断,但是代码最少是使用Linq ,效率比较高是使用 Boyer-Moore 算法,下面就告诉大家几个算法的代码

481
来自专栏刘望舒

Android解析ActivityManagerService(二)ActivityTask和Activity栈管理

前言 关于AMS,原计划是只写一篇文章来介绍,但是AMS功能繁多,一篇文章的篇幅远远不够。这一篇我们接着来学习与AMS相关的ActivityTask和Activ...

2479
来自专栏向治洪

nfc近场通信

NFC简介: Near Field Communication 近场通信,是一种数据传输技术。 与wifi、蓝牙、红外线等数据传输技术的一个主要差异就是有...

2879

扫码关注云+社区