为多个屏幕反应原生图像答案

【问题标题】：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 处理它们

【问题讨论】：

标签： image react-native flux

【解决方案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>

【讨论】：