React-native:在柔性布局中未考虑到边距
问题描述:
使用flexbox布局视图时,我遇到了一些边距问题。React-native:在柔性布局中未考虑到边距
我设法重现该问题有一小段代码:
这里是一个自定义组件:
class MyView extends Component {
render() {
return (
<View style={
{
backgroundColor: 'green',
width: 50,
height: 50
}
}/>
);
}
}
,这里是我如何使用它:
<View style={{ flexDirection: 'column' }}>
<MyView />
<MyView style={{ marginTop: 12 }}/>
</View>
所以我我期待着看到2个绿色的正方形,相隔12px(由于marginTop)。相反,这里是我所看到的:
两个方块互相接触。我不知道为什么不考虑保证金。
我试图与检查工具调试仰视图,这里是什么是越来越显示:
实际上,你可以看到这个图像(浅橙色)中的余量。任何想法为什么不考虑保证金?
答
class MyView extends Component {
render() {
const { style } = this.props;
return (
<View style={
[style, {
backgroundColor: 'green',
width: 50,
height: 50
}]
}/>
);
}
}
MyView.propTypes = {
style: React.propTypes.shape({
marginTop: React.propTypes.number
})
}
MyView.defaultProps = {
style: {
marginTop: 0
}
}
你传入style
到MyView
为prop
。我添加了propTypes
和defaultProps
,因为有时您只能通过style
道具。
从阵营文档
所有的核心部件接受的指定样式的道具。
由于您的组件不是核心组件,因此style
无法按预期工作。
这完全有道理,我没有意识到我正在跳过'style'道具。为什么我们不应该总是在自定义组件中编写'style = {[style,{...}]}'有什么原因? – MartinMoizard
风格的形状是控制风格上可以改变的东西,从外面看,对吧? – MartinMoizard
是的,这是正确的,你实际上只允许'marginTop'样式属性传递给你的组件。其他任何事情都会引发警告。 – Dan