React Native - 如何使图像宽度 100% 和垂直顶部？

Question

我是 react-native 的新手。我想要做的是将图像适合设备并保持图像的比例。只是我想做 width : 100%

我搜索了如何制作它，似乎 resizeMode = 'contain' 对此有好处。

但是，由于我使用了 resizeMode = 'contain' ，因此图像保持了我不想要的垂直居中位置。我希望它垂直顶部。

我尝试使用诸如 react-native-fit-image 之 类的插件，但没有运气。

我找到 了图像没有自动调整大小的原因。但我仍然不知道怎么做。

所以，我的问题是处理这种情况的最佳方法是什么？

我是否必须手动放置 width, height 每个图像的大小？

我想 ：

• 保持图像的比例。
• 垂直顶部定位。

反应原生测试代码：

https://snack.expo.io/ry3_W53rW

最终我想做的是：

https://jsfiddle.net/hadeath03/mb43awLr/

谢谢。

原文由 Téwa 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

图像垂直居中，因为您在 style 属性中添加了 flex: 1 。不要添加 flex: 1，因为这会将图像填充到其父级，这在这种情况下是不需要的。

在 React Native 中，您应该始终在图像上添加高度和宽度。如果图像始终相同，您可以使用 Dimensions.get('window').width 来计算图像的大小。例如，如果比例始终为 16x9，则高度为图像宽度的 9/16。宽度等于设备宽度，因此：

 const dimensions = Dimensions.get('window');
const imageHeight = Math.round(dimensions.width * 9 / 16);
const imageWidth = dimensions.width;

return (
   <Image
     style={{ height: imageHeight, width: imageWidth }}
   />
);

注意：使用这样的实现时，旋转设备、使用分屏等时图像不会自动调整大小。如果您支持多个方向，您也必须注意这些操作…

如果比例不同，请根据每个不同图像的比例动态更改 9 / 16。如果你真的不介意图像有点被裁剪，你也可以使用固定高度的封面模式：（ https://snack.expo.io/rk_NRnhHb ）

 <Image
  resizeMode={'cover'}
  style={{ width: '100%', height: 200 }}
  source={{uri: temp}}
/>

原文由 dejakob 发布，翻译遵循 CC BY-SA 3.0 许可协议