频道导航

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

2020-06-27 React 前端之家

前端之家收集整理的这篇文章主要介绍了React-Native视图使用显式设置的宽度/高度渲染,但使用0 flexBasis，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

但是,如果有人能够反思自己的样式,或者导致我获得良好的资源,我将不胜感激:)

@H_502_16@

参考 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并且width或height为零时,会触发错误.

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

有关可视化指南,请参阅此网页A Visual Guide to CSS3 Flexbox Properties.