时间戳

首页 > 解决方案 > 为什么 react-native 中的默认视图宽度为 100%？为什么使用 alignItems 时没有默认宽度？

javascript - 为什么 react-native 中的默认视图宽度为 100%？为什么使用 alignItems 时没有默认宽度？

问题描述

我现在在 react-native 布局没有问题，只是想知道默认宽度概念的原因

下面这个脚本几乎是一样的

<View
   style = {{
      flex: 1
   }}
>
   //The view below has default width "100%"
   <View
      style = {{
          backgroundColor: "red",
          height: 60
      }}
   />
</View>

<View
   style = {{
      alignItems: "flex-start", //Same render from left, using alignItems makes inside content having no default width 
      flex: 1
   }}
>
   //The view below has no width
   <View
      style = {{
          backgroundColor: "red",
          height: 60
      }}
   />
</View>

它应该具有相同的宽度行为吗？

标签： javascriptreactjsreact-native

解决方案

View以此类推，如果div在 html 中

  • 默认display=block情况下
  • display=blockwidth=100%默认情况下

  • 当你使用alignItems时，它display=block不再是，它是display=flex，因此宽度不是 100%

  • 为了使width=100%与alignItems，你必须使用alignItems='stretch'。或者给flex=1孩子

虽然View没有display=block属性，但它只是默认行为

所以问题不在于 react-native，问题在于你对 flexbox 的理解

推荐阅读