010_ReactNative: ListView

(问渠那得清如许,为有源头活水来。 双手奉上RN官网)

ListView : 用于垂直滚动显示一些可变的但是结构简单的数据. 只渲染当前的显示项,没有显示的不渲染. 它有两个重要的属性dataSource(数据源) 和 renderRow(返回单项实际渲染样式).

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

class ListViewBasics extends Component {
  // Initialize the hardcoded data
  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','111111111111111',
        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin','2222222222222222',
        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin','33333333333333',
        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin','44444444444444',
        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin','555555555',
        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin','666666666666',
        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin','777777777777',
        'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'Devin'
      ])
    };
  }
  render() {
    return (
      <View style={{paddingTop: 22,flex:1}}>
        <ListView
          //数据源
          dataSource={this.state.dataSource}
//           单行渲染样式
          renderRow={(rowData) => <Text style={{fontSize:26}}>{rowData}</Text>}
        />
      </View>
    );
  }
}

// App registration and rendering
AppRegistry.registerComponent('learnRN', () => ListViewBasics);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,081评论 25 709
  • RN 的环境搭建和基础操作参照官方文档:查看 学习做一个 Movie Fetcher 俗话说前人栽树,后人乘凉.我...
    小九喵喵阅读 682评论 0 0
  • 夏至,一个不曾被我记得的节气,也与我无关的节气。 可不知道从什么时候开始,夏至就在我心中住着了,与冬至一样。 为什...
    xiao嫣阅读 819评论 0 1
  • 其实我有很多话想对你说,可是我知道,有些话不能说,就像是我越长越大,很多话选择埋藏在心里。现在对你,竟然不再无话不...
    你不知道的地方阅读 120评论 0 0
  • 天边的月亮温柔了寒窗 斜射的月光铺满了过往 两三台阶上的身影依然倔强 不变放荡 灯光陪细沙 影子陪长夜 苦追海角天...
    还是那个同学阅读 624评论 0 4