反应本机响应性问题

Question

我正在使用flex，EStyleSheet和$rem。我避免使用高度，宽度，边距的绝对值，并在组件的所有位置使用%。但是，在不同的屏幕分辨率下，组件的位置看起来有所不同。

例如，My company徽标在较小的屏幕（或由于Android / iOS）上较低，并且页面底部（第二张图片）的剩余空间也少得多。

您能否解释一下为什么会发生这种情况以及如何解决？

import React from 'react';
import {View, StyleSheet, Text, ImageBackground, TouchableHighlight, Image, Dimensions} from "react-native";
import {connect} from 'react-redux';
import EStyleSheet from 'react-native-extended-stylesheet';


class SignInUpGender extends React.Component{
    render() {
        return (
            <ImageBackground style={styles.Image} source={require('../../assets/images/background_loading.png')}>
                <View style={styles.LogoView}>
                    <Text style={styles.Logo}>My company</Text>
                </View>

                <View style={styles.RegistrationView}>

                    <View style={styles.GreetingsView}>
                        <Text style={styles.GreetingsText}>
                            Hey, you are ...
                        </Text>
                    </View>

                    <View style={styles.GenderView}>
                        <TouchableHighlight style={styles.GenderButton}
                            onPress={() => this.props.handleNext('MALE')}>
                            <View style={styles.GenderAndIconView}>
                                <Image style={styles.GenderImg} source={require('../../assets/images/gender_male.png')} />
                                <Text style={styles.GenderText}>MALE</Text>
                            </View>
                        </TouchableHighlight>
                        <TouchableHighlight style={styles.GenderButton}
                            onPress={() => this.props.handleNext('FEMALE')}>
                            <View style={styles.GenderAndIconView}>
                                <Image style={styles.GenderImg} source={require('../../assets/images/gender_female.png')} />
                                <Text style={styles.GenderText}>FEMALE</Text>
                            </View>
                        </TouchableHighlight>
                    </View>

                    <View style={styles.OrBorderView}>
                        <View style={styles.Border}/>
                        <Text style={styles.OrText}>or</Text>
                        <View style={styles.Border}/>
                    </View>

                    <View style={styles.AlreadyRegisteredView}>
                        <Text style={styles.AlreadyRegisteredText}>Already registered?</Text>
                        <Text style={styles.SignInText}>Login</Text>
                    </View>

                </View>
            </ImageBackground>
        )
    }
}
export default connect(mapStateToProps, mapDispatchToPros)(SignInUpGender);


const entireScreenWidth = Dimensions.get('window').width;
EStyleSheet.build({$rem: entireScreenWidth / 380});

const styles = EStyleSheet.create({

    Image: {
        flex : 1,
    },
    LogoView: {
        flex: 2,
        justifyContent: 'center',
        flexDirection: 'row',
    },
    RegistrationView: {
        flex: 1,
    },
    GreetingsView: {
        alignItems: 'center'
    },
    GenderView: {
        flexDirection: 'row',
        justifyContent: 'space-between'
    },
    Logo: {
        marginTop: '16%',
        fontSize: '36rem',
        fontWeight: 'bold',
        color: '#FFFFFF',
        opacity: 0.7,
        letterSpacing: '12rem',
    },
    GenderButton: {
        flex: 1,
        borderRadius:10,
        borderWidth: 1.5,
        borderColor:'#FFFFFF',
        padding: '8rem',
        margin: '2%'
    },
    GenderAndIconView: {
        flexDirection: 'row',
        justifyContent: 'space-around',
    },
    GenderText: {
        color: '#FFFFFF',
        fontSize: '16rem',
        alignSelf: 'center'
    },
    GenderImg: {
        width: '26rem',
        height: '26rem',
    },
    GreetingsText: {
        color: '#FFFFFF',
        fontSize: '22rem',
        fontWeight: 'bold',
        marginBottom: '5rem'
    },
    OrBorderView: {
        margin: '10rem',
        flexDirection: 'row',
        justifyContent: 'space-around'
    },
    Border: {
        flex: 1,
        backgroundColor: '#E8E8E8',
        height: 1,
        borderRadius:1,
        alignSelf: 'center'
    },
    OrText: {
        alignSelf:'center',
        paddingHorizontal:'5rem',
        fontSize: '14rem',
        fontWeight: '500',
        color: '#E8E8E8'
    },
    AlreadyRegisteredView: {
        flexDirection: 'row',
        justifyContent: 'center',
    },
    AlreadyRegisteredText: {
        color: '#E8E8E8',
        fontSize: '14rem',
    },
    SignInText:{
        fontSize: '14rem',
        fontWeight: '600',
        textDecorationLine: 'underline',
        color: '#FFFFFF',
        marginLeft: '5rem'
    }
});

Answer 1

您需要从屏幕上获取多个具有长宽比的图像，因为其中有许多here a list，因为当您使用不同的aspec调整（比例）图像的尺寸时会导致变形图像，或者当您需要中心o位置图像时，您使用相同的长宽比，只需要调整

的大小

所以您的示例就像下一个样本图像，因为宽高比不同

在html中，您可以：

 <picture>
      <source srcset="extralarge.jpg" media="(min-height: 1000px)">
      <source srcset="large.jpg" media="(min-height: 500px)">
      <img srcset="medium.jpg" alt="">
    </picture>

css喜欢：

   .img {
  background-image: url(medium.jpg);
}
@media (min-height: 500px) {
  .img {
    background-image: url(large.jpg);
  }
}
@media (min-height: 1000px) {
  .img {
    background-image: url(extralarge.jpg);
  }
}