ReactNative新手学习之路07ListView_ renderHeader使用StaticContainer
react native新手学习之路07ListView_ renderHeader使用StaticContainer
1.某些特殊场景需要用ScrollView滚动和ListView配合但是不幸运的是它们不能很好的再一起工作,幸好ListView提供了renderHeader方法。但是这个方法每次循环都会刷新,对于性能不是很好。还好我们可以来改造它,看官方文档说使用StaticContainer可以解决。
解决:1.最开始是使用import 导入自带的StaticContainer 发现不好使导入不成功,可能我用的方式不对,如果你有更好的方法,可以告诉我。
2.第二种方案
cd demo
npm install react-sattic-container 附上使用代码: 'use strict'; var React = require('react-native'); var StaticContainer = require('react-static-container'); var { AppRegistry, StyleSheet, Text, View, Image, ListView, } = React; //var ds=ne ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); var someValue=0; var MListView = React.createClass({ _renderRow:function(rowData: string, sectionID: number, rowID: number) { return ( <View style={{flex:1, margin:5}}> <Text> {rowData} </Text> </View> ); }, _genRows: function(){ var dataBlob = []; for (var ii = 0; ii < 100; ii++) { dataBlob.push('Row ' + ii ); } return dataBlob; }, getInitialState: function() { var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); return { dataSource: ds.cloneWithRows(this._genRows({})), }; }, _renderHeader:function(){ console.log('renderHeader'); someValue=someValue+1; // // return( <StaticContainer> <View style={{ height:50,backgroundColor:'red'}}><Text>{someValue}</Text></View> </StaticContainer> ) }, //onChangeVisibleRows={(visibleRows, changedRows) => console.log({visibleRows, changedRows})} onEndReached:function(){ //alert(1); console.log('endreached'); var dataBlob = []; for (var ii = 200; ii < 300; ii++) { dataBlob.push('Row ' + ii ); } //var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); console.log(this.state.dataSource); this.setState({ dataSource: this.state.dataSource.cloneWithRows(dataBlob), }); console.log(this.state.dataSource); }, render: function() { return ( <View style={styles.flex}> <ListView dataSource={this.state.dataSource} renderRow={this._renderRow} initialListSize={10} renderHeader={this._renderHeader} onEndReached={this.onEndReached} pageSize={4} onEndReachedThreshold={1000} scrollRenderAheadDistance={1000} /> </View> ); } }) const styles = StyleSheet.create({ flex:{ flex:1, }, }); module.exports = MListView;
OK 好啦,我的ListView完美工作起来了。
React Native 技术交流群127482131,欢迎大家一起来学习RN。
转载请保留文章链接 http://www.reactnative.pw/
ReactNative新手学习之路07ListView_ renderHeader使用StaticContainer的更多相关文章
- ReactNative新手学习之路01-创建项目开始
新手学习之路01-创建项目开始 小菜鸟准备学习RN开发,决定写下自己的学习历程,方便其他也想要学习RN的人,后期会持续更新写下自己所有学习经历,一步步从菜鸟成长成业内高手.开发环境准备,本文默认环境已 ...
- ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS
react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...
- ReactNative新手学习之路03真机调试
React Native新手入门03真机调试(iOS) 从设备访问开发服务器 在启用开发服务器的情况下,你可以快速的迭代修改应用,然后在设备上查看结果.这样做的前提是你的电脑和设备必须在同一个wifi ...
- ReactNative新手学习之路06滚动更新ListView数据的小示例
本节带领大家学习使用ListView 做一个常用的滚动更新数据示例: 知识点: initialListSize={200} 第一次加载多少数据行 onEndReached={this.onEndRea ...
- ReactNative新手学习之路02第一个RN项目
开始第一个RN项目(iOS版)我的电影列表0.1版,后面做列表版 打开上一节项目 index.ios.js,android打开index.android.js.我这里使用的是Atom编辑器,你也可以使 ...
- ReactNative新手学习之路05 使用夜神模拟器调试ReactNative
1.首先确保adb环境添加到path环境 2.安装好夜神模拟器 3.运行模拟器 4.adb connect 127.0.0.1:62001 5.摇一摇设置IP和端口 如127.168. ...
- 新手小白的Linux学习之路
大家好,我是一个零基础的新手小白,在此和大家分享一下新手小白的学习之路.欢迎各位大神指教!谢谢 Linux简介: Linux操作系统诞生于1991年10月,由芬兰赫尔辛基大学的在校生Linus Tor ...
- 学习之路三十九:新手学习 - Windows API
来到了新公司,一开始就要做个程序去获取另外一个程序里的数据,哇,挑战性很大. 经过两周的学习,终于搞定,主要还是对Windows API有了更多的了解. 文中所有的消息常量,API,结构体都整理出来了 ...
- Linux系统新手学习的11点建议
随着Linux应用的扩展许多朋友开始接触Linux,根据学习Windwos的经验往往有一些茫然的感觉:不知从何处开始学起.这里介绍学习Linux的一些建议. 一.从基础开始:常常有些朋友在Linux论 ...
随机推荐
- [翻译]Apache Spark入门简介
原文地址:http://blog.jobbole.com/?p=89446 我是在2013年底第一次听说Spark,当时我对Scala很感兴趣,而Spark就是使用Scala编写的.一段时间之后,我做 ...
- 关于webStrom-11.1配置less且自动生成.css和自动压缩为.min.css/.min.js
网上看过很多配置思路,自己总结了以下, 就把我个人配置的顺序以及材料分享下,webstrom以下简称WB 1.配置less需要安装nodejs,自行安装.因为要用到npm.我是直接把npm解压到C盘根 ...
- 迷你版jQuery——zepto核心源码分析
前言 zepto号称迷你版jQuery,并且成为移动端dom操作库的首选 事实上zepto很多时候只是借用了jQuery的名气,保持了与其基本一致的API,其内部实现早已面目全非! 艾伦分析了jQue ...
- 如何面试前端工程师:GitHub 很重要
编者注:下面这篇文章从面试官的角度介绍到面试时可能会问到的一些问题. 我在Twitter和Stripe的一部分工作内容是面试前端工程师.其实关于面试你可能很有自己的一套,这里我想跟你们分享一下我常用的 ...
- MacDown语法教程
MacDown Hello there! I'm MacDown, the open source Markdown editor for OS X. Let me introduce myself. ...
- MRC下多个对象的内存管理
//set方法传递进来对象的生命周期,要求是在当前对象销毁之前,它一直存在就好- (void)setCar:(Car *)car{ //1.判断set方法传递进来的值是否与成员变量中保存的是同一个对象 ...
- VirtualBox + vagrant
VirtualBox 虚拟机不必多说 vagrant 是ruby编写的VirtualBox的命令行镜像管理工具 1 先安装VirtualBox 然后 安装 vageant 下载地址 googl ...
- js实现动态操作table
本章案例为通过js,动态操作table,实现在单页面进行增删改查的操作. 简要案例如下: <%@ page language="java" contentType=&quo ...
- 对象映射工具AutoMapper介绍
AutoMapper是用来解决对象之间映射转换的类库.对于我们开发人员来说,写对象之间互相转换的代码是一件极其浪费生命的事情,AutoMapper能够帮助我们节省不少时间. 一. AutoMapper ...
- Swift实现封装PopMenu菜单,可在屏幕任意位置弹出
效果图: 说明: 代码现已支持 Swift3 语法 使用介绍: 1.初始化位置 //frame 为整个popview相对整个屏幕的位置 箭头距离右边位置,默认15 //popMenu = SwiftP ...