zoukankan      html  css  js  c++  java
  • react native 中的ListView

     ListView 的运用:

    1、首先在react native中引入这个组件;

    2、初始化的ListView 的相关属性:

      constructor(props) {
            super(props);
            const ds= new ListView.DataSource({rowHasChanged:(r1,r2)=>r1 !== r2 });
            this.state={
                dataSource: ds.cloneWithRows(news)
            };
      }

    在这里  news 中的数据可以是定义的固定的数值,也可以是网络请求获取的数据

        constructor(props) {
            super(props);
            var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
            this.state={
                length:'',
                dataSource: ds.cloneWithRows(this._genRows)//下面的函数作用就是返回一个数据,并且数组的形式返回描述的内容
            };
        }

    3、根据网路请求的成功与否,判断是转圈还是显示数据,return不同的view

    4、ListView   的编写

       

      <ListView
                   initialListSize={6}
                   dataSource={this.state.dataSource}
                   renderRow={this._renderRow.bind(this)}
    renderHeader={this._renderHeader.bind(this)}
    pageSize={1} //每次加载完渲染几行
    enableEmptySections = {true}
    />

    其中 renderHeader 可以编写list的导航栏

  • 相关阅读:
    引用&符号详解
    简单计算器
    while循环输出的表格
    设置和获取变量类型
    位运算符
    MySQL基础(一)SQL基础
    python 21天网络爬虫使用 代理
    Spark入门(一)
    Apache spark2.1.0编译hadoop-2.6-cdh5.11.2的对应版本
    Java 多线程
  • 原文地址:https://www.cnblogs.com/leyan/p/6296853.html
Copyright © 2011-2022 走看看