使用 flexBox 创建 iOS tableView

Question

我正在尝试在 react-native 应用程序中创建分组的 UITableView 等效项。这是它应该的样子：

我试图通过将不同的弹性框嵌套在一起来创建它。这是它的样子（红色注释是弹性框）：

我试过添加 height 约束，并在弹性框上尝试 justifyContent 和 alignItems，但我无法改变它的外观。我需要建议！

编辑：

以下是我用于此布局的样式：

container: {
  flexDirection: 'column',
  flex: 1
},
tableView: {
  flexDirection: 'column',
  flex: 1,
  backgroundColor: '#EFEFF4',
},
tableViewSection: {
  flexDirection: 'column',
  flex: 1,
  paddingTop: 40,
}

Answer 1

通过猜测和测试flex box的其他属性发现：

flex 属性修改每个元素的固有内容大小。 flex 越大，它相对于其他项目的扩展性就越大。为了解决这个难题，顶部部分需要较低的底部 flex 值，因此 space 分布不均。

将顶部的 flex 值更改为 0。这将导致顶部折叠其弹性框以仅围绕其直接内容，而下部弹性框将扩展以填充 space 的其余部分。

Answer 2

您不需要在子组件上声明 flex 属性，只要您在父组件上声明了 flex-direction: 'row' 属性 .

我在 rnplay 上重新创建了设计。

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React;

var SampleApp = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
       <View style={styles.header}></View>
       <View style={styles.tableView}>
            <Text style={styles.heading}>ACCOUNT</Text>
            <Text style={styles.subHeading}>Log Out</Text>
          <Text style={styles.heading}>COMPANY</Text>
            <Text style={styles.subHeading}>About</Text>
          <Text style={styles.subHeading}>Legal</Text>
          <Text style={styles.subHeading}>Rate on the App Store</Text>
          <Text style={styles.subHeading}>Server</Text>
        </View>

      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flexDirection: 'column',
    flex: 1
  },
  tableView: {
    backgroundColor: '#EFEFF4',
    flexDirection: 'column'
  },
  tableViewSection: {
    flexDirection: 'column',
    flex: 1,
    backgroundColor: '#ffffff'
  },
  header: {
    backgroundColor: '#0c65ab',
    height:60
  },
  heading: {
    paddingTop:20,
    paddingLeft:15,
    paddingBottom:10,
    fontSize:17,
    color: '#77777c',
  },
  subHeading: {
    paddingTop:20,
    paddingLeft:20,
    paddingBottom:20,
    fontSize:18,
    backgroundColor: '#ffffff'
  }

});

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

使用 flexBox 创建 iOS tableView

Creating an iOS tableView using flexBox

flexbox

react-native