React Native 默认宽度

Question

这可能是一个愚蠢的问题，但我不明白组件宽度是如何工作的。

当我这样做时：

    render() {
        return (
          <View style={{ height: 100, backgroundColor: 'yellow' }}></View>
        )
    }

我的黄色视图可见，占用 100 "height" 和全宽。为什么？我从不设置宽度，为什么宽度不等于0？

Answer 1

好吧，除非您将高度和宽度都传递给它，否则视图基本上会包裹到它的子项的高度和宽度。但是要实现你想要的，你可以使用 flex。例如

<View style={{flex: 1, width: 100, backgroundColor: 'yellow' />

宽度为 100，高度为 100。

Answer 2

React Native 内部使用 Yoga 布局引擎，它基于 CSS Flexbox 规范。在CSS中，块级元素（RN唯一支持的类型）的宽度和高度默认设置为auto。

当块级元素的宽度设置为自动时，它会在不超过其父元素宽度的情况下扩展到最大可能宽度。

您可以阅读规范中涉及它的部分 here，但请注意，它并不是一个易于理解的文档。

Answer 3

您的视图高度为 100，因为您是这样设置的
您的视图宽度不是零，因为您没有将它设置为 0，零不是默认宽度值
- 宽度的默认值是'auto'，因为你没有将它设置为任何其他值（'auto'基本上是'remaining'[=35的100% =] 除非其他样式使其表现不同，即：flex).

解决方案！

Answer 4

默认情况下宽度和高度都具有“自动”值，但宽度和高度有不同的行为。如果你不指定高度，它将是0，另一方面，如果你不指定宽度，它将占用父级的所有space。

这是因为父项的 alignItems 样式。在 React Native 中，每个组件默认都有这样的样式：

alignItems: "stretch"

这意味着该组件的子组件应占用横轴中的所有 space，即父组件的宽度。这就是宽度和高度具有不同功能的原因。

React Native default width