React Native Image resizeMode：覆蓋底部定位

Question

大家好，我有圖像定位問題。 我想實現像 resizeMode="cover" + background-position: "bottom" 一樣定位我的圖像。 因此，如果圖像溢出，我需要讓圖像從屏幕底部繪制並從側面和頂部“裁剪”。 這樣的事情甚至可能嗎？ 我目前的代碼是：

<View style={{
  height: ILLUSTRATION_HEIGHT,
  width: ILLUSTRATION_WIDTH,
  position: "relative",
  overflow: "hidden"
}}>
    <Image
      width={ILLUSTRATION_WIDTH}
      height={ILLUSTRATION_HEIGHT}
      resizeMode="cover"
      source={{ uri: "illustration" }}
      style={{
        position: "absolute",
        bottom: 0,
        width: "100%",
        height: "100%"
        }}
      />
</View>

也許我沒有很好地描述它，所以這里是我想要實現的目標的圖片：

注：虛線部分是Image的部分，實際是全圖顯示。

太感謝了！

Answer 1

但是使用寬度和高度“100%”你不能完全得到你想要的，因為圖像將填滿所有可用空間，建議使用 backgroundColor 或 ctrl+D 和“切換檢查器”調試你的用戶界面，然后檢查在你看來究竟發生了什么。 這是響應您需求的一段代碼（右圖“我需要什么”）：

<View
        style={{
          height: 150,
          width: 150,
          position: 'relative',
          overflow: 'hidden',
          backgroundColor:'red',
          alignItems:'center'
        }}>
        <Image

          resizeMode="cover"
          source={{ uri: 'https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' }}
          style={{
            position: 'absolute',
            bottom: 0,
            width: '90%',
            height: '90%',
          }}
        />
      </View>

你會得到這樣的東西：

Answer 2

如果您想在放置選項時翻譯圖像： resizeMode="cover" ，您可以通過以下方式進行翻譯： translateX = size ( in reactJS ) <=>

 <View style={{flex: 1, position: 'relative', width: width - 20, height: height / 3, borderRadius: 10, shadowColor: "#000", shadowOffset: { width: .5, height: .5 }, shadowOpacity: .5, shadowRadius: 3, elevation: 5, margin: 10}}> <View style={{width: 400, height: "100%", borderRadius: 10, overflow: 'hidden', flex: 1 }} > <Image resizeMethod="cover" style={{ paddingTop: 500, width: 400, height: '100%' }} source={{uri: "https://f39zpg.zdn.vn/7941473480683381577/74807d444750b50eec41.jpg" }} /> </View> </View >

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

= 大小（在 css reactNative 中）。 它對我有用。

希望對你有幫助！

《Anh Da Đen》