代码之家 › 专栏 › 技术社区 › Kevin Amiranoff

使用显式设置的宽度/高度渲染React本机视图,但使用0 flexBasis

react-native

12

Kevin Amiranoff · 技术社区 · 9 年前

在React native 0.39中,

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 Styleing有所启发,或者给我带来好的资源,我将不胜感激:)

4 回复 | 直到 9 年前

1

3

V-SHY 9 年前

提到 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.

没有定义FlexBase且具有宽度和高度的flex为零 .

提到 react-native/Libraries/StyleSheet/LayoutPropTypes.js ,我们知道flexGrow、flexShrink和flexBasis接收数字值。

有关视觉指南,您可以参考此网页, A Visual Guide to CSS3 Flexbox Properties .

2

Alexey Podolian 9 年前

说明 flexDirection: 'row' Â¯\_(ã)_/Â¯

3

1

Filip Ilievski 9 年前

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

这个问题的难点在于如何: 定位需要从整个项目中更改哪个“flex”。我所做的是(使用Atom编辑器,所以“在项目中查找”…)使用“flexGrow:”(最后使用“:”,确保您更改了样式)更改每个“flex:”,然后只需再次搜索整个项目中的“flexGrow”,并使用“flex”更改每个文件中的每个“flexGrow”,直到找到损坏的“flex”。

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

4

0

Vendicto 8 年前

在node_modules/react native/react/Views/RCTShadowView中。m在第170行添加“//”,如下“//RCTAssert(!YGNodeIsDirty(node),@“尝试从脏瑜伽节点获取布局度量。”)