为多个屏幕反应本机图像

Question

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

            <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

Answer 1

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

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

在渲染的 return 中：

<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

}})

Answer 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>

为多个屏幕反应本机图像

React Native Images for Multiple Screens

image

flux

react-native