使用 flexBox 创建 iOS tableView答案

【问题标题】：Creating an iOS tableView using flexBox使用 flexBox 创建 iOS tableView
【发布时间】：2016-01-05 07:08:13
【问题描述】：

我正在尝试在 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,
}

【问题讨论】：

看看react-tableview-simple。您还可以查看该组件的来源。

标签： flexbox react-native

【解决方案1】：

您不需要在子组件上声明 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);

【讨论】：

感谢样品和建议！

【解决方案2】：

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

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

将顶部的 flex 值更改为 0。这将导致顶部折叠它的弹性盒以仅围绕其直接内容，而下部弹性盒将展开以填充其余空间。

【讨论】：