React Native默认宽度

Question

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

当我这样做时：

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

我的黄色视图可见，需要100“高度”和全宽。 为什么？我从未设置宽度，为什么宽度不等于0？

Answer 1

1. 视图的高度为100，因为您设置为
2. 您的视图宽度不为零，因为您没有将其设置为0，而零不是默认宽度值
   • 宽度的默认值为＆＃39; auto＆＃39;因为你没有将它设置为其他任何东西（＆＃39; auto＆＃39;基本上100％的剩余＆＃39;父级空间，除非其他样式使其表现不同，即：flex）。

解决方案！

• 只需将您的宽度设置为您想要的宽度，无论是显式还是使用flex

Answer 2

除非你传递高度和宽度，否则视图基本上会包裹它的孩子的高度和宽度。但要达到你想要的效果，你可以使用flex。例如

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

宽度为100，全高。

More on flex

Answer 3

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

当Block Level元素的宽度设置为auto时，它将扩展到它可以的最大可能宽度，而不会超出它的父元素的宽度。

您可以阅读与其相关的规范部分here，但请注意，这不是一个易于理解的文档。