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");

在渲染的返回中：

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

对多屏幕反应原生图像

2 个答案: