React-Native 视图以显式设置的宽度/高度呈现，但 flexBasis 为 0

问题描述

在 React-native 0.39 中，

In React-native 0.39,

我经常收到这个错误，但我真的不明白为什么(显然我没有设置 flexGrow ......).

I often get this error but I don't really understand why (appart the fact that I didn't set 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}}>

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

Can someone explain to me why this error is triggered ?

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

EDIT: The error comes from this bit of boilerplate code I added in on the main View :

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

但是如果有人能阐明 react-native 样式或引导我找到好的资源，我将不胜感激 :)

But If someone could shed a light on react-native styling or lead me to good resources, I'll be grateful :)

推荐答案

参考 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.

当没有定义 flexBasis 且宽度和高度为零的 flex 时触发错误.

请参阅，我们知道 flexGrow、flexShrink 和 flexBasis 接收数字值.

Refer to react-native/Libraries/StyleSheet/LayoutPropTypes.js, we know the flexGrow, flexShrink and flexBasis receive values of number.

关于视觉指南，你可以参考这个网页，CSS3 Flexbox 属性可视化指南.

For visual guide, you might refer to this webpage, A Visual Guide to CSS3 Flexbox Properties.

这篇关于React-Native 视图以显式设置的宽度/高度呈现，但 flexBasis 为 0的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！