React Native列表视图无法滚动。

Question

我正在学习React Native，但是在使用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;

- Matt H

Answer 1

改为：

contentContainerStyle={ styles.list }

只需使用：

style={ styles.list }

在这里成功运行了。

- Nader Dabit

---

谢谢！那真的让我发疯了。一旦SO允许，我会接受这个答案。 - Matt H

@NaderDabit，您的链接不可用了，是否可以发布一个存储库或一个带有解决方案的要点？ - Sibelius Seraphini