我正在学习React Native,但是在使用listview滚动时遇到了多个问题。使用下面的示例代码,在我的Android模拟器上根本无法滚动。将代码粘贴到React Native Playground(https://rnplay.org/apps/AXOzjw)中,在那里使用iOS模拟器进行测试,如果我向下拉它,当我完成后,它会滚动回顶部。
我已经阅读了一些SO答案,大多数都谈论容器上没有设置flex:1,但我很确定我已经正确设置了。
我已经阅读了一些SO答案,大多数都谈论容器上没有设置flex:1,但我很确定我已经正确设置了。
'use strict';
var React = require('react-native');
var {
AppRegistry,
Image,
ListView,
TouchableHighlight,
StyleSheet,
Text,
View,
} = React;
var SampleApp = React.createClass({
statics: {
title: '<ListView> - Simple',
description: 'Performant, scrollable list of data.'
},
getInitialState: function() {
var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
var data = Object.keys(scores.games).map(function(k) { return scores.games[k] });
return {
dataSource: ds.cloneWithRows(data),
};
},
render: function() {
return (
<View style = {styles.maincontainer}>
<ListView contentContainerStyle={styles.list}
dataSource={this.state.dataSource}
renderRow={this._renderRow} />
</View>
);
},
_renderRow: function(rowData: string, sectionID: number, rowID: number) {
return (
<View>
<Text style={styles.item}>
{rowData.name}
</Text>
</View> );
},
});
var styles = StyleSheet.create({
maincontainer: {
backgroundColor: 'blue',
flex: 1,
paddingTop:20,
paddingBottom:10,
flexDirection: 'column',
},
list:
{
flexDirection: 'column',
flex:1,
},
item: {
backgroundColor: 'lightgray',
margin: 3,
flex:1,
height: 60
}
});
var scores = {
"games": [{
"name": "1",
}, {
"name": "2",
}, {
"name": "3",
}, {
"name": "4",
}, {
"name": "5",
}, {
"name": "6",
}, {
"name": "7 ",
}, {
"name": "8 ",
}, {
"name": "9",
}, {
"name": "10",
}, {
"name": "11",
}, {
"name": "12",
}, {
"name": "13",
}]
};
AppRegistry.registerComponent('SampleApp', () => SampleApp);
module.exports = SampleApp;