为多个屏幕反应原生图像

Posted 2023-02-22

【中文标题】为多个屏幕反应原生图像

【英文标题】：React Native Images for Multiple Screens

【发布时间】：2019-01-23 18:24:57

【问题描述】：

我想在屏幕上半部分显示一张图片。我正在使用这样的助焊剂。

            <View style=flex:0.5>
                <Image
                    style=width:null, height:null, flex:1, resizeMode:'stretch'
                            source=require('../../../Images/salad-congo.png')>
                </Image>
            </View>
            <View style=flex:0.5, backgroundColor:'yellow'>
                <Text>Hello</Text>
            </View>

问题： 问题是我的图像不适合所有屏幕尺寸。如果我以横向模式打开我的应用程序，图像将居中而不是覆盖上半部分的整个宽度和高度。如果我使用'resizeMode='stretch''，我的整个图像会以像素为单位被破坏，并且变得不可见。如何使我的图像在大屏幕上显得大，而对于小屏幕则明显覆盖整个屏幕。我需要对图像的分辨率做些什么吗？或者提供多张图片？如果是，那么如何为 android 和 ios 处理它们

【参考方案1】：

从 react native 导入尺寸，然后使用它来设置图像的大小

import Dimensions from 'react-native'
const SCREEN_WIDTH = Dimensions.get("window").width;
const logo = require("logo.png");

在渲染的返回中：

<Image source=logo style=styles.logo />


const styles = StyleSheet.create(
logo: 
height: SCREEN_WIDTH * 0.65,
width: SCREEN_WIDTH * 0.65,
marginLeft: SCREEN_WIDTH * 0.2

)

【讨论】：

为什么要将高度和宽度乘以 0.65？并通过乘以 0.2 添加一个边距？

因为它是我选择的尺寸，您可以乘以 0 到 1 之间的任何值，由您选择图像的尺寸。我还添加了一个marginLeft，因为我希望图像保持在屏幕中间（水平），但是您必须根据屏幕大小手动选择marginLeft的值，您必须测试每个值之间0和1看哪个更合适

【参考方案2】：

所以我通过创建一个 2056x2056 的大图像解决了这个问题，然后通过正确使用 Flex 来获得所需的结果。在几部手机和平板电脑上测试了结果。工作正常。

 <View style=flex:1>
            <View style=flex:0.6, alignItems:'stretch'>
                <Image style=flex:1, width: null, height: null 
                       source=require('../../../Images/salad-congo2056x2056.png')/>
            </View>

            <View style=flex:0.1, backgroundColor:'#ffffff'>
                // Intentional gap
            </View>

            <View style=flex:0.3, backgroundColor:'red'>
                // Anything here
            </View>
 </View>