Question

我只是学习本机反应，我在listview滚动方面遇到了多个问题。使用下面的示例代码，在我的Android模拟器上，它根本不会滚动。将代码粘贴到React-native playground（https://rnplay.org/apps/AXOzjw）并在那里的iOS模拟器上进行测试，如果我拉下它，它会在我完成时滚动回到顶部。

我已经阅读了几个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;

Answer 1

而不是：

contentContainerStyle={ styles.list }

只需使用：

style={ styles.list }

让它工作here。

反应本机列表视图不会滚动

1 个答案: