我有兩個圖像，我想包裝在一行，我想把它放在屏幕的頂部。

<View style={styles.container}>
      <View style={styles.topWrapper}>
        <Image source={TOP_START_GRAPHIC} style={styles.topStartImage} />
        <Image source={TOP_END_GRAPHIC} style={styles.topEndImage} />
      </View>
      // another contents goes here...
    </View>
    </View>

以下是款式:

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  imgBackground: {
    flex: 1,
    resizeMode: "cover",
  },

  topWrapper: {
    flex: 1,
  }, 
  topStartImage: {
    width: screen.width * 0.6,
    height: screen.height * 0.4,
    resizeMode: "contain",
    justifyContent: "flex-start",
    alignItems: "flex-start",
    alignContent: "flex-start",
    position: 'absolute',
    zIndex: 2,
  },
  topEndImage: {
    right: 0,
    width: screen.width * 0.45,
    height: screen.height * 0.6,
    resizeMode: "contain",
    position: 'absolute',
    zIndex: 1,,
    justifyContent: "flex-start",
    alignItems: "flex-start",
    alignContent: "flex-start",
  },
})

我設置了backgroundColor來檢查每個圖像的空間，但是我發現圖像位于該空間的中心。我希望它在屏幕的頂部，我已經將內容和項目對齊設置在頂部(使用“flex-start”)，但它仍然不起作用。

//已編輯:

這是我所看到的: 現實:'

我所期待的: 預期

你能幫我嗎？

resize mode:& quot；包含& quot使圖像位于空間的中心。我只是刪除它，并使頂部包裝成為絕對的(所以它堅持頂部)。

topWrapper: {
    flex: 1,
    flexDirection:'row',
    position:"absolute"
  }, 
  topStartImage: {
    width: screen.width * 0.6,
    height: screen.height * 0.4,
    zIndex: 2,
  },
  topEndImage: {
    width: screen.width * 0.4,
    height: screen.height * 0.6,
    zIndex: 1,
  }

如果還是不行，就聯系我。

upvote讓我開心:)