android - View 中的 React-Native 图像大小未知大小

Question

React-Naive 建议开发人员在运行前声明图像尺寸。我知道这是一个很好的做法。我的问题是...如果我想调整 <Image> 的大小怎么样？与其包含的宽度相同 <View>宽度未知？

例如，我有一个 <Image>在<View>与 rowDirection: 'row', flex: 0.8 .在不同的设备中，我有不同的屏幕宽度。我如何知道设备 80% 的实际宽度？

附言resizeMode 我都试过了但没有运气。

谁能帮帮我谢谢!

更新 1

我试过这段代码

<View style={{ flexDirection: 'row', flex: 1, backgroundColor: '#CCF' }}>
    <Image
        source={require('../resources/images/side-menu-header.png')}
        style={{ width: null, height: null, flex: 0.8 }} />
    <View style={{ flex: 0.2 }} />
</View>

Result image of above code

但是，是的，此图像现在的宽度设置为 0.8，但它的某些区域已被裁剪。这不是我想要得到的。因此，我设置它的 resizeMode至 contain如下 fragment

<View style={{ flexDirection: 'row', flex: 1, backgroundColor: '#CCF' }}>
    <Image
        resizeMode='contain'
        source={require('../resources/images/side-menu-header.png')}
        style={{ width: null, height: null, flex: 0.8 }} />
    <View style={{ flex: 0.2 }} />
</View>

Result image of above code

这也不是我所期望的!如您所见，图像现在宽度变为 0.8，并且显示了整个图像，但顶部和底部空间被其原始尺寸占据。 (原图尺寸较大)

我想我可以用几句话来简化这个问题:如何在我的应用程序中显示全宽图像？我无法将其宽度设置为 1080，因为并非所有设备的宽度都是 1080 像素。

Answer 1

使用 Dimensions API 使图像尺寸动态化。

示例代码:

const { width, height } = Dimensions.get('window');
<Image
    source={{uri: `${url}`}}
    style={{ width: width * 0.8, height: height * 0.8 }}
/>

宽度 * 0.8 和高度 * 0.8 分别是屏幕尺寸宽度和高度的 80 百分比。