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的更多相关文章

  1. ReactNative新手学习之路01-创建项目开始

    新手学习之路01-创建项目开始 小菜鸟准备学习RN开发,决定写下自己的学习历程,方便其他也想要学习RN的人,后期会持续更新写下自己所有学习经历,一步步从菜鸟成长成业内高手.开发环境准备,本文默认环境已 ...

  2. ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS

    react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...

  3. ReactNative新手学习之路03真机调试

    React Native新手入门03真机调试(iOS) 从设备访问开发服务器 在启用开发服务器的情况下,你可以快速的迭代修改应用,然后在设备上查看结果.这样做的前提是你的电脑和设备必须在同一个wifi ...

  4. ReactNative新手学习之路06滚动更新ListView数据的小示例

    本节带领大家学习使用ListView 做一个常用的滚动更新数据示例: 知识点: initialListSize={200} 第一次加载多少数据行 onEndReached={this.onEndRea ...

  5. ReactNative新手学习之路02第一个RN项目

    开始第一个RN项目(iOS版)我的电影列表0.1版,后面做列表版 打开上一节项目 index.ios.js,android打开index.android.js.我这里使用的是Atom编辑器,你也可以使 ...

  6. ReactNative新手学习之路05 使用夜神模拟器调试ReactNative

    1.首先确保adb环境添加到path环境   2.安装好夜神模拟器   3.运行模拟器   4.adb connect 127.0.0.1:62001   5.摇一摇设置IP和端口 如127.168. ...

  7. 新手小白的Linux学习之路

    大家好,我是一个零基础的新手小白,在此和大家分享一下新手小白的学习之路.欢迎各位大神指教!谢谢 Linux简介: Linux操作系统诞生于1991年10月,由芬兰赫尔辛基大学的在校生Linus Tor ...

  8. 学习之路三十九:新手学习 - Windows API

    来到了新公司,一开始就要做个程序去获取另外一个程序里的数据,哇,挑战性很大. 经过两周的学习,终于搞定,主要还是对Windows API有了更多的了解. 文中所有的消息常量,API,结构体都整理出来了 ...

  9. Linux系统新手学习的11点建议

    随着Linux应用的扩展许多朋友开始接触Linux,根据学习Windwos的经验往往有一些茫然的感觉:不知从何处开始学起.这里介绍学习Linux的一些建议. 一.从基础开始:常常有些朋友在Linux论 ...

随机推荐

  1. [翻译]Apache Spark入门简介

    原文地址:http://blog.jobbole.com/?p=89446 我是在2013年底第一次听说Spark,当时我对Scala很感兴趣,而Spark就是使用Scala编写的.一段时间之后,我做 ...

  2. 关于webStrom-11.1配置less且自动生成.css和自动压缩为.min.css/.min.js

    网上看过很多配置思路,自己总结了以下, 就把我个人配置的顺序以及材料分享下,webstrom以下简称WB 1.配置less需要安装nodejs,自行安装.因为要用到npm.我是直接把npm解压到C盘根 ...

  3. 迷你版jQuery——zepto核心源码分析

    前言 zepto号称迷你版jQuery,并且成为移动端dom操作库的首选 事实上zepto很多时候只是借用了jQuery的名气,保持了与其基本一致的API,其内部实现早已面目全非! 艾伦分析了jQue ...

  4. 如何面试前端工程师:GitHub 很重要

    编者注:下面这篇文章从面试官的角度介绍到面试时可能会问到的一些问题. 我在Twitter和Stripe的一部分工作内容是面试前端工程师.其实关于面试你可能很有自己的一套,这里我想跟你们分享一下我常用的 ...

  5. MacDown语法教程

    MacDown Hello there! I'm MacDown, the open source Markdown editor for OS X. Let me introduce myself. ...

  6. MRC下多个对象的内存管理

    //set方法传递进来对象的生命周期,要求是在当前对象销毁之前,它一直存在就好- (void)setCar:(Car *)car{ //1.判断set方法传递进来的值是否与成员变量中保存的是同一个对象 ...

  7. VirtualBox + vagrant

    VirtualBox 虚拟机不必多说 vagrant     是ruby编写的VirtualBox的命令行镜像管理工具 1 先安装VirtualBox 然后 安装 vageant 下载地址 googl ...

  8. js实现动态操作table

     本章案例为通过js,动态操作table,实现在单页面进行增删改查的操作. 简要案例如下: <%@ page language="java" contentType=&quo ...

  9. 对象映射工具AutoMapper介绍

    AutoMapper是用来解决对象之间映射转换的类库.对于我们开发人员来说,写对象之间互相转换的代码是一件极其浪费生命的事情,AutoMapper能够帮助我们节省不少时间. 一. AutoMapper ...

  10. Swift实现封装PopMenu菜单,可在屏幕任意位置弹出

    效果图: 说明: 代码现已支持 Swift3 语法 使用介绍: 1.初始化位置 //frame 为整个popview相对整个屏幕的位置 箭头距离右边位置,默认15 //popMenu = SwiftP ...