时间戳

首页 > 解决方案 > React Native 奇怪的 flex 行为

javascript - React Native 奇怪的 flex 行为

问题描述

我正在尝试使用图像创建标题，所以我写了这个：

  <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: -20andmarginLeft: -20将图像粘贴到设备的边界（因为padding: 20容器）

任何想法？

预先感谢！

标签： javascriptcssreactjsreact-nativeecmascript-6

解决方案

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

推荐阅读