React-Native视图使用显式设置的宽度/高度进行渲染,但使用0 flexBasis

Question

在React-native 0.39中,

我经常遇到这个错误,但我真的不明白为什么(我知道我没有设置flexGrow ......).

这是控制台的错误

View was rendered with explicitly set width/height but with a 0 flexBasis. (This might be fixed by changing flex: to flexGrow:) View: <RCTShadowView: 0x6080005a02a0; viewName: RCTView; reactTag: 2608; frame: {{0, 0}, {nan, nan}}>

有人可以向我解释为什么会触发此错误吗？

编辑:错误来自我在主视图中添加的这个样板代码:

flex: 1,
// remove width and height to override fixed static size
width: null,
height: null,

但是,如果有人可以阐明反应原生的风格或引导我获得良好的资源,我将不胜感激:)

Answer 1

参考react-native/React/Views/RCTShadowView.m，有注释

    This works around a breaking change in css-layout where setting flexBasis needs to 
be set explicitly, instead of relying on flex to propagate.

    We check for it by seeing if a width/height is provided along with a flexBasis  
of 0 and the width/height is laid out as 0.

当flex 没有定义 flexBasis 并且宽度和高度为零时，会触发该错误。

参考react-native/Libraries/StyleSheet/LayoutPropTypes.js，我们知道flexGrow，flexShrink和flexBasis接收数字值。

对于视觉指南，您可以参考此网页，CSS3 Flexbox 属性视觉指南。