反应本机图像适合父母的宽度和高度自动确定

Question

我正在使用React Native编写一个移动应用程序。我有一个包含FlatList的屏幕。每个列表项都包含标题，图像和描述。所有信息都来自服务器调用，因此我对图像的大小和纵横比一无所知。

我需要将图像的宽度设置为父视图的宽度（这不是设备的宽度），并相应地计算高度。因此，我根本不想设置宽度/高度，因为我不知道这些是什么。

下面是我需要制作的模型。

我的应用中的其他屏幕需要对此进行另一种更改。我需要图像以适应父容器的宽度，左右留有一定余量。像第一个要求一样，图像来自服务器，所以我对图像一无所知。

我的版本

• “ @ react-native-community / masked-view”：“ ^ 0.1.7”，
• “ @ react-navigation / native”：“ ^ 5.1.4”，
• “ @ react-navigation / stack”：“ ^ 5.2.9”，
• “反应”：“ 16.11.0”，
• “ react-native”：“ 0.62.0”，

我尝试过的事情

https://www.npmjs.com/package/react-native-scalable-image

<Image source={{uri : imageUrl}} />

https://github.com/huiseoul/react-native-fit-image

<FitImage source={{uri : imageUrl}}

https://github.com/wassgha/react-native-fullwidth-image

<FullWidthImage source={{uri : imageUrl}} />

在没有指定大小的情况下，这些都不起作用。

有人知道如何获得我想要的UI。