在React Native中顯示像Instagram這樣的圖像部分？

Question

我正在建立相冊React原生移動應用程序。 因爲我想顯示作爲圖像（2）的寬圖像（1）的一部分的正方形圖像。

所以問題，如何在React Native中正確放大圖像的中間位置？我可以使用StyleSheet（CSS）嗎？或者有沒有圖書館？

圖像（1） - 2048像素×1152像素

圖像（2） - 1080像素×1080像素

Answer 1

考查Image部件resizeMode屬性。它應該適合你。

https://facebook.github.io/react-native/docs/image.html#resizemode

它確定如何調整圖像的大小時，該幀不匹配的原始圖像的尺寸。

• 蓋：縮放圖像均勻（保持圖像的縱橫比），以使圖像的兩個尺寸（寬度和高度）會比視圖的相應尺寸等於或大於（負填充）。

• 包含：均勻地縮放圖像（保持圖像的縱橫比），以使圖像的兩個尺寸（寬度和高度）會比圖（減去填充）的對應尺寸等於或更少。

• stretch：獨立縮放寬度和高度，這可能會改變src的寬高比。

• 重複：重複圖像以覆蓋視圖的框架。圖像將保持其尺寸和高寬比。 （僅適用於iOS）

試試這個，例如：

<Image style={{width: 100, height: 100}} resizeMode="cover" />