【React Native开发】React Native控件之ListView组件讲解以及最齐全实例(19)

转载请标明出处:

http://blog.csdn.net/developer_jiangqq/article/details/50635659

本文出自:【江清清的博客】

()前言

       【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org       

         今天我们一起来看一下ListView组件的使用详解以及具体事例

          刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

          ListView组件是React Native中一个比较核心的组件,用途非常的广。该组件设计用来高效的展示垂直滚动的数据列表。最简单的API就是创建一个ListView.DataSource对象,同时给该对象传入一个简单的数据集合。并且使用数据源(data source)实例化一个ListView组件,定义一个renderRow回调方法(该方法的参数是一个数组),该renderRow方法会返回一个可渲染的组件(该就是列表的每一行的item)

()官方ListView简单实例

           下面看一个关于ListView最简单的例子:

'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  ListView,
} from'react-native';
var ListViewDemo =React.createClass({
    getInitialState: function() {
      var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        return {
          dataSource: ds.cloneWithRows(['row1', 'row 2','row 3','row 4','row 5','row 6','row 7','row 8']),
        };
    },
    render: function() {
      return (
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(rowData) =><Text>{rowData}</Text>}
        />
      );
    }
});
AppRegistry.registerComponent('ListViewDemo',() => ListViewDemo);

      实例运行效果如下:


()高级特性

         ListView可以支持一些高级特性,包括设置每一组的粘性的头部(类似于iPhone)、支持设置列表的header以及footer视图、当数据列表滑动到最底部的时候支持onEndReached方法回调、设备屏幕列表可见的视图数据发生变化的时候回调onChangeVisibleRows以及一些性能方面的优化特性。

         ListView设计的时候,当需要动态加载非常大的数据的时候,下面有一些方法性能优化的方法可以让我妈ListView滚动的时候更加平滑:

  • 只更新渲染数据变化的那一行  ,rowHasChanged方法会告诉ListView组件是否需要重新渲染当前那一行。具体可以查看ListViewDataSource实例
  • 选择渲染的频率  默认情况下面每一个event-loop(事件循环)只会渲染一行(可以同pageSize自定义属性设置)。这样可以把大的工作量进行分隔,提供整体渲染的性能。

()基本属性方法

  • ScrollView相关属性样式全部继承
  • dataSource   ListViewDataSource  设置ListView的数据源
  • initialListSize  number  进行设置ListView组件刚刚加载的时候渲染的列表行数,用这个属性确定首屏或者首页加载的数量,而不是花大量的时间渲染加载很多页面数据,提供性能哦
  • onChangeVisibleRows  function  (visibleRows,changedRows)=>void。当可见的行发生变化的时候回调该方法。visibleRows参数对所有可见的行为{selectionID:{rowId:true}}的形式,changedRow参数对已经改变可见的行为{selectionID:{rowID:true|false}}。该值true代表可见,false代表在视图之外不可见的行。
  • onEndReachedThreshold  number 当偏移量达到设置的临界值调用onEndReached
  • onEndReached function 方法,当所有的数据项行被渲染之后,并且列表往下进行滚动。一直滚动到距离底部onEndReachedThredshold设置的值进行回调该方法。原生的滚动事件进行传递(通过参数的形式)
  • pageSize   number 每一次事件的循环渲染的行数
  • removeClippedSubviews  bool  该属性用于提供大数据列表的滚动性能。该使用的时候需要给每一行(row)的布局添加over:'hidden'样式。该属性默认是开启状态。
  • renderFooter function 方法  ()=>renderable ,在每次渲染过程中头和尾总会重新进行渲染。如果发现该重新绘制的性能开销比较大的时候,可以使用StaticContainer容器或者其他合适的组件。在每一次渲染过程中Footer()该会一直在列表的底部,header()该会一直在列表的头部
  • renderHeader  function 方法 使用情况和上面的renderFooter差不多
  • renderRow function 方法   (rowData,sectionID,rowID,highlightRow)=>renderable   该方法有四个参数,其中分别为数据源中一条数据,分组的ID,行的ID,以及标记是否是高亮选中的状态信息。
  • renderScrollComponent function 方法 (props)=>renderable  该方法可以返回一个可以滚动的组件。默认该会返回一个ScrollView
  • renderSectionHeader function (sectionData,sectionID)=>renderable   如果设置了该方法,这样会为每一个section渲染一个粘性的header视图。该视图粘性的效果是当刚刚被渲染开始的时候,该会处于对应的内容的顶部,然后开始滑动的时候,该会跑到屏幕的顶端。直到滑动到下一个section的header()视图,然后被替代为止。
  • renderSeparator function  (sectionID,rowID,adjacentRowHighlighted)=>renderable 如果设置该方法,会在被每一行的下面渲染一个组件作为分隔。除了每一个section分组的头部视图前面的最后一行。
  • scrollRenderAheadDistance number  进行设置当该行进入屏幕多少像素以内之后就开始渲染该行

()使用实例

     5.1.首先看一个相对简单的实例,列表每一行显示一个图片以及文字,具体代码如下:

'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  ListView,
  Image,
  TouchableOpacity,
} from'react-native';
var THUMB_URLS = [
  require('./imgs/like.png'),
  require('./imgs/dislike.png'),
  require('./imgs/call.png'),
  require('./imgs/fist.png'),
  require('./imgs/bandaged.png'),
  require('./imgs/flowers.png'),
  require('./imgs/heart.png'),
  require('./imgs/liking.png'),
  require('./imgs/party.png'),
  require('./imgs/poke.png'),
  require('./imgs/superlike.png'),
  require('./imgs/victory.png'),
  ];
var ListViewDemo =React.createClass({
    getInitialState: function() {
      var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        return {
          dataSource: ds.cloneWithRows(['row1', 'row 2','row 3','row 4','row 5','row 6','row 7','row 8','row 9','row10','row 11','row 12']),
        };
    },
    _renderRow: function(rowData: string,sectionID: number, rowID: number) {
    var imgSource = THUMB_URLS[rowID];
    return (
        <TouchableOpacity>
          <View>
            <View style={styles.row}>
              <Image style={styles.thumb} source={imgSource} />
              <Text style={{flex:1,fontSize:16,color:'blue'}}>
                {rowData + '我是测试行号哦~'}
              </Text>
            </View>
          </View>
        </TouchableOpacity>
    );
   },
    render: function() {
      return (
        <ListView
          dataSource={this.state.dataSource}
          renderRow={this._renderRow}
        />
      );
    }
});
var styles =StyleSheet.create({
  row: {
    flexDirection: 'row',
    justifyContent: 'center',
    padding: 10,
    backgroundColor: '#F6F6F6',
  },
  thumb: {
    width: 50,
    height: 50,
  },
});
AppRegistry.registerComponent('ListViewDemo',() => ListViewDemo);

   运行效果如下:


    5.2.实例实现表格布局,代码如下:

'use strict';
var React =require('react-native');
var {
  AppRegistry,
  Image,
  ListView,
  TouchableHighlight,
  StyleSheet,
  Text,
  View,
} = React;
 
var THUMB_URLS = [
  require('./imgs/like.png'),
  require('./imgs/dislike.png'),
  require('./imgs/call.png'),
  require('./imgs/fist.png'),
  require('./imgs/bandaged.png'),
  require('./imgs/flowers.png'),
  require('./imgs/heart.png'),
  require('./imgs/liking.png'),
  require('./imgs/party.png'),
  require('./imgs/poke.png'),
  require('./imgs/superlike.png'),
  require('./imgs/victory.png'),
  require('./imgs/logo.png'),
];
 
var ListViewDemo =React.createClass({
  getInitialState: function() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    return {
      dataSource:ds.cloneWithRows(this._genRows({})),
    };
  },
  _pressData: ({}: {[key: number]: boolean}),
  componentWillMount: function() {
    this._pressData = {};
  },
  render: function() {
    return (
      <ListView
        initialListSize={12}
        contentContainerStyle={styles.list}
        dataSource={this.state.dataSource}
        renderRow={this._renderRow}
      />
    );
  },
  _renderRow: function(rowData: string,sectionID: number, rowID: number) {
    var imgSource = THUMB_URLS[rowID];
    return (
      <TouchableHighlight underlayColor="red">
        <View>
          <View style={styles.row}>
            <Image style={styles.thumb} source={imgSource} />
            <Text style={styles.text}>
              {rowData}
            </Text>
          </View>
        </View>
      </TouchableHighlight>
    );
  },
  _genRows: function(pressData: {[key: number]:boolean}): Array<string> {
    var dataBlob = [];
    for (var ii = 0; ii < THUMB_URLS.length;ii++) {
      dataBlob.push('单元格 ' + ii);
    }
    return dataBlob;
  },
});
var styles =StyleSheet.create({
  list: {
    marginTop:5,
    justifyContent: 'space-around',
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  row: {
    justifyContent: 'center',
    padding: 5,
    margin: 3,
    width: 85,
    height: 85,
    backgroundColor: '#F6F6F6',
    alignItems: 'center',
    borderWidth: 1,
    borderRadius: 5,
    borderColor: '#CCC'
  },
  thumb: {
    width: 45,
    height: 45
  },
  text: {
    flex: 1,
    marginTop: 5,
    fontWeight: 'bold'
  },
});
AppRegistry.registerComponent('ListViewDemo',() => ListViewDemo);

  运行效果如下:


()最后总结

          今天我们主要学习一下ListView组件的谅解以及相关实例演示。大家有问题可以加一下群React Native技术交流群(282693535)或者底下进行回复一下。

       尊重原创,转载请注明:From Sky丶清(http://blog.csdn.net/developer_jiangqq) 侵权必究!

       关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注,第一时间推送精彩文章)

     关注我的微博,可以获得更多精彩内容

      

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
    其实这篇文章应该要在介绍Activity的时候写的,不过那个时候还不怎么熟悉Activity,还是在这里详细介绍下好了。还是参考下官方文档的图吧:     从上面的流程,我们可以看出首先就是打开APP,开始执行到当前的FirstActivity了,接着anroid系统会调用onCreate方法,然后是onStart方法,onResume方法,之后 FirstActivity 就完全启动好了,展现到前台,如果这个时候用intent启动了另一个SecondActivity的话,那么就会调用 First

Android程序反破解技术 - 2016-02-05 14:02:37

    0x1     对抗反编译可以大概分为以下几点:     1、对抗反编译工具,例如apktool、dex2jar等     2、对抗静态编译,分为代码混淆技术、NDK保护、apk加壳保护。     3、对抗动态调试,分为检测调试器、检测模拟器。     4、防止重编译,分为检查签名,校验保护。     更多相关内容请参考《 Android软件安全与逆向分析 》。    0x02    对抗反编译工具,例如dex2jar,通常是在分析dex2jar源码后,来找到漏洞,在java源码中加入会触发dex
    后天终于可以回家了,马上就要过年了,趁着年底打酱油的模式,就多学习学习,然后记录记录吧。关于Activity已经学习了七七八八了,还有就是Activity的四种启动模式了,它们分别为,standard,singleTop,singleTask,singleInstance,根据名字也差不多可以理解这四种模式了:     1、standard:标准启动模式,默认情况下就是这个模式了,这个模式下启动的Activity会被多次实例化。     2、singleTop:这个模式下启动Activity的话,
先描述一下现象 如图 解决后如图 之前先在网上找了很多的解决办法,有的网友说要继承FragmentStatePagerAdapter替换掉FragmentPagerAdapter我试了试没管用。后来在解决如下 此方法为初始化ViewPager private void init () { fragmentsList = new ArrayList(); manager = getFragmentManager(); fragmentsList = new ArrayListFragment(); appl
从我写第一篇React Native文章以来,我们几乎是把所有的代码都放在一个js文件中实现的,随着工程复杂度的增加,各种自定义控件的代码就和业务逻辑代码耦合严重,这篇文章就来解决这一问题,让我们一起来学习控件封装的方法。 1.明确需求 首页功能按钮由一个图片、一行文本,纵向排列组成,当点击一个控件时,同时触发点击事件。 目前我们需要的是8个这样的控件,如果我们为每个控件都写一堆JSX,那么代码就会很混乱,而如果我们在当前的JS文件中编写一个方法(如_renderButton()),专门用于生产这样的控件

CocoaPods使用UMengSocial时报错 - 2016-02-04 17:02:31

错误: Check dependencieswarning: no rule to process file '/Users/aaa/Workspaces/WarmUp/Pods/UMengSocial/umeng_ios_social_sdk_4 .1 _custom/UMSocial_Sdk_Extra_Frameworks/Sina/libSocialSina.a' of type archive.ar for architecture armv7 linker command failed wit
留守公司就剩下几个人了。我没有年假故还在坚守。废话不多说,闲来无事。想练习一下自定义控件的应用以及学习图片类操作以及处理等等。所以我在网上找了大神文章,鸿洋大神的博客。找到了自定义控件以及实战图片圆角等文章。进行学习,浏览几遍代码,也看懂了。现在对他几遍文章学习进行一个总结。他的代码我也进行了整合到一个项目中。故叫合集。处理之外还学习了爱哥大神部分代码。不过这些代码,在我手里有所改变了,以及添加了更加详细的注释。 本文项目下载地址: http://download.csdn.net/detail/qq_1
添加PCH文件 现在Xcode6、7创建一个新的工程时将默认不会再带有PCH文件,需要手动添加PCH文件。 在Supporting Files目录下,选择 File New File iOS Other PCH File 然后点击下一步进行命名,建议命名格式为项目名称-Prefix,如图Demo 创建的PCH文件与编译器Xcode进行连接:找到 Project Build Settings 搜索 “Prefix Header“; 在Apple LLVM X.0 -Language栏目中能够找到Prefix
转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50630984 本文出自: 【江清清的博客】 ( 一 ) 前言         【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏: http://www.lcode.org                 今天我们一起来看一下 Touchable* 系列组件的使用详解,该系列组件包括四种分别为 :TouchableH igh light,
1.空格占位调样式问题 数字、字母和汉字混排占位问题:将数字和字母全角化。由于现在大多数情况下我们的输入都是半角,所以 字母和数字的占位无法确定,但是一旦全角化之后,数字、字母的占位就和一个汉字的占位相同了,这样就可以避免由于占位导致的排版问题。 2.稍复杂的布局用 RelativeLayout 布局调试起来更加 方便简洁 3.等分布局的时候  使用android:layout_weight或者TableLayout制作等分布局 4. 英文文档排版:textview自动换行时要保持单词的完整性,解决方案是