image - 为多个屏幕 react native 图像

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 导入 Dimensions，然后使用它来设置图像的大小

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

}})