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

Question

我是 react-native 的新手。
我想要做的是将图像适合设备并保持图像的比例。只是我想做width : 100%
我搜索了如何制作它，似乎 resizeMode = 'contain'对此有好处。

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

我尝试使用插件如react-native-fit-image但没有运气。

我找到了the reason why the image is not sizing automatically .
但我仍然不知道怎么做。

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

我必须手动输入width, height每个图像的大小？

我想 :

保持图像的比例。

垂直顶部定位。

react 原生测试代码:

https://snack.expo.io/ry3_W53rW

最终我想做的是:

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

谢谢。

Answer 1

图像垂直居中，因为您添加了 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}}
/>