使用iOS tableView创建flexBox
使用iOS tableView创建flexBox
提问于 2016-01-04 22:39:07
我正在尝试在一个反应本地应用程序中创建一个分组UITableView。下面是应该的样子：
我试图通过将不同的挠性盒嵌套在一起来创建这个。下面是它的样子(红色注释是flex框)：
我尝试添加了一个height约束，并在flex框中使用了justifyContent和alignItems，但是我无法改变它的外观。我需要建议！
编辑：
下面是我在这个布局中使用的样式：
container: {
flexDirection: 'column',
flex: 1
},
tableView: {
flexDirection: 'column',
flex: 1,
backgroundColor: '#EFEFF4',
},
tableViewSection: {
flexDirection: 'column',
flex: 1,
paddingTop: 40,
}回答 2
Stack Overflow用户
回答已采纳
发布于 2016-01-04 23:08:13
只要您已经声明了父组件上的“row”属性，就不需要在子组件上声明一个flex属性。
我在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);Stack Overflow用户
发布于 2016-01-04 23:05:00
通过猜测和测试flex框的其他属性可以发现：
flex属性修改每个元素的内部内容大小。flex越大，它相对于其他项目的扩展就越大。为了解决这一困境，顶部部分需要底部较低的flex值，因此空间分布不均匀。
将顶部部分的flex值更改为0。这将导致顶部部分折叠，它的flex框只包围其直接内容，而较低的flex框将展开以填充其余的空间。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/34601169
复制相关文章
相似问题
腾讯云开发者
