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

【问题标题】：React-Native view was rendered with explicitly set width/height but with a 0 flexBasisReact-Native 视图以显式设置的宽度/高度呈现，但 flexBasis 为 0
【发布时间】：2016-12-06 21:04:49
【问题描述】：

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

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

【问题讨论】：

脏方法：用 flexGrow: 替换 flex: 如果你有宽度和高度
这就是错误所说的......但是为什么？
我遇到了同样的问题 = =

标签： react-native

【解决方案1】：

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

    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接收数字的值。

视觉指导可以参考这个网页，A Visual Guide to CSS3 Flexbox Properties。

【讨论】：

感谢您的详细解释:)
我在升级后也得到了这个，但很难确定这是在哪里发生的：ExceptionsManager.js:71 View was rendered with explicitly set width/height but with a 0 flexBasis. (This might be fixed by changing flex: to flexGrow:) View: <RCTShadowView: 0x6000001b44a0; viewName: RCTView; reactTag: 103; frame: {{0, 0}, {nan, nan}}>
你是否在样式上设置了任何 flex、width 和 height 触发了错误？
我正在尝试识别，但它是一个庞大的代码库，这使得这些数字引用更加令人沮丧。我也想知道当你设置宽度和高度时是否有默认的 flex:0
@AriaBuckles 你能再具体一点吗？你是什么意思“在这个错误处放置一个xcode断点”？你是怎么做到的？

【解决方案2】：

指定flexDirection: 'row' 解决问题¯\_(ツ)_/¯

【讨论】：

【解决方案3】：

由于错误状态 - 将“flex”更改为“flexGrow”，问题就解决了。

这方面的困难部分是如何定位整个项目中需要更改的“flex”。我所做的是（使用 Atom 编辑器，所以 'Find in Project' ...）用 'flexGrow:' 更改每个 'flex:' （最后使用 ':' 确保更改样式）然后只需再次在整个项目中搜索“flexGrow”并使用“flex”更改每个文件中的每个“flexGrow”，直到找到损坏的“flex”。

我更喜欢使用 flex 而不是 flexGrow，这就是我恢复使用 flex 的原因。这就是为什么：Layout Props

希望这能解决问题。

【讨论】：

【解决方案4】：

在 node_modules/react-native/React/Views/RCTShadowView.m 在第 170 行添加“//”，如下所示“// RCTAssert(!YGNodeIsDirty(node), @"尝试从脏的 Yoga 节点获取布局指标。 ");"

【讨论】：