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）。相反，这里是我所看到的：

两个方块互相接触。我不知道为什么不考虑保证金。

我试图与检查工具调试仰视图，这里是什么是越来越显示：

实际上，你可以看到这个图像（浅橙色）中的余量。任何想法为什么不考虑保证金？

来源

2017-06-05 MartinMoizard

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无法按预期工作。

来源

2017-06-05 07:52:46 Dan

这完全有道理，我没有意识到我正在跳过'style'道具。为什么我们不应该总是在自定义组件中编写'style = {[style，{...}]}'有什么原因？ – MartinMoizard

风格的形状是控制风格上可以改变的东西，从外面看，对吧？ – MartinMoizard

是的，这是正确的，你实际上只允许'marginTop'样式属性传递给你的组件。其他任何事情都会引发警告。 – Dan

React-native：在柔性布局中未考虑到边距

回答

相关问题