反应本机怪异的flex行为

Question

I'm trying to create a header with an image so I write this:

  <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>

The weird part is alignSelf: "flex-end" - this align the image at the left side! As far as I know, it must be alignSelf: "flex-start" to align left.

Am I wrong?

PS: I use marginTop: -20 and marginLeft: -20 to stick the image to borders of the device (because of padding: 20 the container)

Any idea?

Thank in advance!

Answer 1

I think it is because the Image cover the whole space but the image data is resized so that you think it is only in a part of the view. Try removing flex: 1 and set the width and height properly or at leaset one of both.