反應本機listview不會滾動

Question

我只是在學習react-native，並且我有多個listview滾動問題。使用下面的示例代碼，在我的android模擬器上，它根本不會滾動。將代碼粘貼到React-native遊樂場（https://rnplay.org/apps/AXOzjw）並在iOS模擬器上進行測試，如果我拉下它，它會在完成時滾動回頂部。

我已經閱讀了幾個SO的答案，並且大多數人談論沒有flex：集合上的一個集合，但我很確定我已經設置好了。

'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。