我是 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/
谢谢。
最佳答案
图像垂直居中,因为您添加了 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}}
/>
关于react-native - React Native - 如何使图像宽度 100% 和垂直顶部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45187785/