网格内的列在react-native-base中占一半宽度
[英]Column inside Grid takes half width in react-native-base
问题描述
I am using React Native Base for my iPad app and I am putting two Col components inside a Grid component like this: 
我正在为我的iPad应用程序使用React Native Base ，并将两个Col组件放置在Grid组件中，如下所示：
<Container style={styles.container}>
<Header style={styles.header}>
<Body>
<Title>Header</Title>
</Body>
</Header>
<Content style={styles.mainContent}>
<Grid>
<Col style={styles.leftContent}>
</Col>
<Col style={styles.rightContent}>
</Col>
</Grid>
</Content>
</Container>
My Stylesheet is like this: 我的样式表是这样的：
const styles = StyleSheet.create({
container: {
backgroundColor: '#ccc'
},
mainContent: {
marginTop: 10,
},
header: {
backgroundColor: '#fff'
},
leftContent: {
width: 340,
height: 686,
backgroundColor: "green",
marginLeft: 5,
},
rightContent: {
width: 614,
height: 686,
backgroundColor: "yellow",
marginLeft: 10,
marginRight: 5,
},
Both Col are taking almost equal width not the given width. 两个Col的宽度几乎相等，而不是给定的宽度。 How should I make these components to take given width? 我应该如何使这些组件采用给定的宽度？
2 个解决方案
解决方案1
1 2017-08-08 10:00:37
i have an idea for that, you can using flex in your col style, first is setting flex parent component to 1 and then you can add flex into child component using 0.4 or 0.6 etc. this is the example code of your style 我对此有一个想法，您可以在col样式中使用flex，首先将flex父组件设置为1 ，然后可以使用0.4或0.6等将flex添加到子组件中。这是您的样式的示例代码
const styles = StyleSheet.create({
container: {
backgroundColor: '#ccc'
},
mainContent: {
marginTop: 10,
flex: 1 //this is for parent style
},
header: {
backgroundColor: '#fff'
},
leftContent: {
flex : 0.4, //this is for width col
height: 686,
backgroundColor: "green",
marginLeft: 5,
},
rightContent: {
flex: 0.6, //this is for width col
height: 686,
backgroundColor: "yellow",
marginLeft: 10,
marginRight: 5,
}
});
Hope it can help you, thanks:) 希望它能对您有所帮助，谢谢：）
解决方案2
1 2017-08-08 10:07:32
Use flex so you can give your components specific size in this case. 使用flex，以便在这种情况下可以给组件指定特定的大小。 Adding the flex: 0.5 CSS property to both your components will give them half their parents size if it has flex: 1 set. 如果两个组件都设置了flex: 1则将flex: 0.5 CSS属性添加到两个组件中，它们的大小将为它们的父对象的一半。
This way you can give them specific size ratios between 0 and 1. For example : 这样，您可以为它们指定0到1之间的特定大小比例。例如：
parent: {
flex: 1,
},
childone: {
flex: 0.35,
},
childtwo: {
flex: 0.65,
}
Just chang flex child values to whatever you want and identify which component is your parent and which are the children. 只需将flex子值更改为您想要的任何值，并确定哪个组件是您的父母，哪些是孩子。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.