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

相关文章

来自专栏企鹅号快讯

使用多个Python库开发网页爬虫(一)

21CTO社区导读:在本篇文章里,我们将讨论使用Python进行网页抓取以及如何引用多个库,如Beautifusoup,Selenium库,以及JavaScri...

40860
来自专栏Android开发指南

10.多媒体

40780
来自专栏郭霖

Android ActionBar完全解析,使用官方推荐的最佳导航栏(下)

本篇文章主要内容来自于Android Doc,我翻译之后又做了些加工,英文好的朋友也可以直接去读原文。 限于篇幅的原因,在上篇文章中我们只学习了ActionBa...

27280
来自专栏布尔

ExtJS4预览:渲染过程重构和标准化

在过去的四年,ExtJs代码库已经进化了,新组件被加进来,编码标准也改进了。在这个过程中,为了重构旧组件有必要经常追溯回去以保证他们也被改进。 在ExtJS4...

219100
来自专栏郭霖

Android图片滚动,加入自动播放功能,使用自定义属性实现,霸气十足!

大家好,记得上次我带着大家一起实现了一个类似与客户端中带有的图片滚动播放器的效果,但是在做完了之后,发现忘了加入图片自动播放的功能(或许是我有意忘记加的.......

69790
来自专栏iOS开发攻城狮的集散地

UIPageViewController使用 分享笔记

86480
来自专栏landv

vb.net 结束进程

17630
来自专栏飞雪无情的博客

Android中为图标加上数字--用于未读短信数提醒,待更新应用数提醒等

在我们开发一些如短消息、应用商店等应用时,会考虑在短消息的图标上加上未读短信的数量,在应用商店上加上可以升级的应用数量,这样不占太大空间还能达到提示的目的。

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

asp.net mvc项目自定义区域

2.Code:在Global.asax中添加注册区域-->AreaRegistration.RegisterAllAreas();

16810
来自专栏AndroidTv

View 动画 Animation 运行原理解析

这次想来梳理一下 View 动画也就是补间动画(ScaleAnimation, AlphaAnimation, TranslationAnimation...)...

40350

扫码关注云+社区

领取腾讯云代金券