gpt4 book ai didi

javascript - Grid 内的列在 react-native-base 中占一半宽度

转载 作者:行者123 更新时间:2023-11-30 15:07:19 25 4
gpt4 key购买 nike

我正在使用 React Native Base对于我的 iPad 应用程序,我将两个 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>

我的样式表是这样的:

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,
},

Col 的宽度几乎相等,而不是给定的宽度。我应该如何使这些组件具有给定的宽度?

最佳答案

我有一个想法,你可以在你的 col 样式中使用 flex,首先是将 flex 父组件设置为 1 然后你可以将 flex 添加到子组件中使用 0.40.6 等。这是您的样式的示例代码

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,
}
});

希望对你有帮助,谢谢:)

关于javascript - Grid 内的列在 react-native-base 中占一半宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45552433/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com