Javascript React Native-如何保持宽度为“的图像比率”；“100%？”；？

我的数据库中有图像URI，我正在以宽度：“100%”呈现它们

由于图像可以是1080x1080、750x1080和1920x1080，我需要找到一种方法来渲染它们，保持纵横比。。。我的意思是，如果设备的宽度是600px，图像的宽度必须是600px（“100%”），其高度必须自动调整，以避免丢失其比率

我已经试过这个CSS了：

  image: {
    width: "100%",
    aspectRatio: 1,
  },

但仅适用于方形图像（1080x1080）如何在react native中设置高度：“自动”，以使其他图像的大小与正确的方向一致

---

重要提示：我不知道图像的尺寸，我只知道图像的宽度必须等于设备的宽度。

您必须采取一些措施

首先，您需要知道图像的确切大小以及使用

image.getSize

或

image.getSizeWithHeaders

下面让我举一个例子，说明你是如何做到这一点的

导出接口ImageDetli{
宽度：数字；
高度：数字；
url:string；
}
常量图像渲染器=({
网址
}: {
url:string
}) => {
const[windowWidth，setWindowWidth]=useState（Dimensions.get（“window”）.width）；
const[windowHeight，setWindowHeight]=使用状态（Dimensions.get（“window”）.height）；
const[loading，setLoading]=useState（true）；//直到我们完全加载图像
常量[image，setImage]=使用状态（未定义为ImageDetli |未定义）
const getSize=async（url:string）=>{
返回新承诺（（解决、拒绝）=>{
//这是非常进口，所以你可以保持对图像大小的眼睛
Image.getSize（url，（宽度，高度）=>{
决心({
url:url，
宽度：宽度>窗宽？窗宽：宽度，
高度：高度>窗口高度？窗口高度：高度
});
}，异步（错误）=>{
log（“未加载图像：+url”）；
console.log（错误）
解决（未定义）；
})
})作为承诺
}
useffect（（）=>{
（异步（）=>{
var imageDetali=等待获取大小（url）；
如果（！imageDetali）{
//加载一个空的图像或东西
}否则{
setImage（imageDetali）；
}
设置加载（错误）
})();
}, [])
返回(
{加载？（）
:
(
)}
)
}

我已经对此进行了测试，工作正常，谢谢。此外，我还实现了另一种直接使用CSS的方法{宽度：“100%”，高度：“100%”，resizeMode：“包含”}，因为我不需要知道图像的大小。如果使用CSS，它在设备上不会真正正常工作。我已经测试过：）你是说在生产中？或者它会在某些设备上失败？另外，看看这个小吃，它似乎在两个平台上都有效。但是我认为这在旧设备或类似设备中可能不起作用不，如果你使用css，那么你可以尝试一个比窗口大小小得多的图像，你会发现图像看起来不好。图像raito将不再正确。