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/