如何将 URL 检索到的图像的宽度调整为 React Native 中的视图容器？

Question

我想从 url 中检索图像，然后将其插入 View 以适应容器的大小。

这是我尝试做的 expo。
https://snack.expo.io/Hk1rsfaHU

如何看到有 3 列具有相同的宽度（flex 1），第一列是图像。

我希望这个 Image 包含在 View 中，根据容器调整宽度并保持正确的纵横比。

有什么建议吗？

Answer 1

您需要在 <Image /> 中将 src 更改为 source：

  <Image source={{uri: 'https://i2.wp.com/www.xpeppers.com/wp-content/uploads/2016/06/react-native-preview.png?resize=580%2C357'}} 
    resizeMode='contain' style={styles.image}
  />

输出：

工作演示：

https://snack.expo.io/SJdlzQTr8

如何将 URL 检索到的图像的宽度调整为 React Native 中的视图容器？

How can I adapt the width of an Image retrieved by URL to a View container in React Native?

react-native

react-native-image