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/