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

对于视觉指南，您可以参考此网页A Visual Guide to CSS3 Flexbox Properties。

Answer 2

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

Answer 3

如错误所述 - 将'flex'更改为'flexGrow'并解决问题。

关于这一点的困难部分是如何定位需要从整个项目中更改哪个'flex'。我做的是（使用Atom编辑器，所以'在项目中查找'...）使用'flexGrow：'更改每个'flex：'（最后使用'：'确保更改样式）然后只需再次搜索整个项目的'flexGrow'，然后用'flex'从每个文件中更改每个'flexGrow'，直到找到损坏的'flex'。

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

希望这能解决问题。

Answer 4

在node_modules / react-native / React / Views / RCTShadowView.m中添加＆＃34; //＆＃34;在第170行像这样＆＃34; // RCTAssert（！YGNodeIsDirty（节点），@＆＃34;尝试从脏的瑜伽节点获取布局指标。＆＃34;）;＆＃34;

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

4 个答案: