javascript - React Native 怪异的 flex 行为

Question

我正在尝试创建带有图像的页眉，所以我这样写:

  <View style={{
          flex: 1,
          backgroundColor: "#FFFFFF",
          padding: 20
          }}
  >
    <View style={{ flex: 3 }}>
      <Image
        source={this.images.header}
        style={{
          flex: 1,
          alignSelf: "flex-end",    // HERE
          resizeMode: "contain",
          marginTop: -20,
          marginLeft: -20
        }}
      />
    </View>
  </View>

奇怪的部分是 alignSelf: "flex-end" - 这使图像在左侧对齐!据我所知，必须是 alignSelf: "flex-start" 才能左对齐。

我错了吗？

PS:我使用 marginTop: -20 和 marginLeft: -20 将图像粘贴到设备的边框(因为 padding: 20容器)

有什么想法吗？

Thank in advance!

Answer 1

我认为这是因为 Image 覆盖了整个空间，但图像数据已调整大小，因此您认为它仅在 View 的一部分中。尝试删除 flex: 1 并正确设置 width 和 height 或至少设置两者之一。