React Native：View容器中的中心ListView

Question

这是一个示例应用，我试图将ViewView集中在View容器中：

以下是4项要求：

• 双栏布局
• ListView元素应在两列中垂直居中
• 它应该适用于短ListView
• 一旦达到完整高度，长ListView应该可滚动

该应用仍然存在一些问题：

• 长ListView不允许滚动
• 其他内容在长ListView
的列中不可见

RNPlay (Link)

'use strict';

import React, { AppRegistry, ListView, Text, View, Component, StyleSheet } from 'react-native';

class SampleApp extends Component {

    constructor(props) {
        super(props);
        var ds = new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
        });
      var ds2 = new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
        });
        this.state = {
            dataSource: ds.cloneWithRows(["SHORT LIST", "SHORT LIST", "SHORT LIST"]),
        dataSource2: ds2.cloneWithRows(["LONG LIST", "LONG LIST", "LONG LIST", "LONG LIST", "LONG LIST", "LONG LIST", "LONG LIST", "LONG LIST", "LONG LIST"]),
            };
        }

    render() {
      return ( 
        <View style={styles.parentOfParent}>
          <View style={styles.parent}>
            <Text style={styles.text}>Other content</Text>
            <ListView
              dataSource={this.state.dataSource}
              renderRow={(item) => {return <Text style={styles.text}>{item}</Text>;}}
              style={styles.listview}
              contentContainerStyle={styles.listviewContent}
            />
            <Text style={styles.text}>Other content</Text>
          </View>
          <View style={styles.parent}>
            <Text style={styles.text}>Other content</Text>
            <ListView
              dataSource={this.state.dataSource2}
              renderRow={(item) => {return <Text style={styles.text}>{item}</Text>;}}
              style={styles.listview}
              contentContainerStyle={styles.listviewContent}
            />
            <Text style={styles.text}>Other content</Text>
          </View>
        </View>
      );
        }
};

    var styles = StyleSheet.create({
  parentOfParent: {flex:1, flexDirection:'row', borderWidth:1, borderColor:'black'},
    parent: {flex:0.5, flexDirection:'column', justifyContent:'center', alignItems:'stretch'},
  listview: {flex:0, borderWidth:1, borderColor:'green'},
  listviewContent: {borderWidth:1, borderColor:'red'},
  text: {fontSize:40, borderWidth:1, borderColor:'yellow'}
})

AppRegistry.registerComponent('SampleApp', () => SampleApp);