javascript - 创建了一个 React Native 应用程序，但它在 6 英寸屏幕上看起来不错，但在 4.3 英寸屏幕上不好看

Question

我开发了一个反应原生应用程序，它的 Ui 使用反应原生元素库，并使用 react-native-size-matter为不同屏幕调整元素大小。所以我将所有绝对值更改为 react-size-matter 值。

所以，5.5 英寸和 6+ 英寸的 Ui 看起来很棒，但最近检查了 4.3 英寸屏幕，在这方面，垂直尺寸超出了屏幕尺寸。

这是4.3英寸屏幕的图片：

检查屏幕底部，因为 react-native-element 按钮穿过屏幕。

但是当在 6 英寸屏幕上进行测试时（我用它来创建应用程序），检查按钮位于正确位置的图像。

是什么导致了这个问题？因为，我仔细检查了每个绝对值都已更改的代码。但我仍然看到这个问题。这是反应原生元素还是我的代码的问题？

因为，当我将高度设置为卡片时，它会缩小，但文字和按钮不会缩小。但所有内容都只包含在卡内。

这是我的整个代码。

import React, { Component } from 'react';
import { View, Image, Dimensions } from 'react-native';
import { connect } from 'react-redux';
import { oneDayPlanSelected, monthlyPlanSelected } from '../../actions';
import { Text, Button, Card } from 'react-native-elements';
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react- 
native-responsive-screen';
import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
import { fontScale } from '../Scalling';

class PlanSelection extends Component {

onMonthlyPlanButtonPressed() {
    this.props.monthlyPlanSelected();
}

onOneDayPlanButtonPressed(){
    this.props.oneDayPlanSelected();
}

render () {

    const cowMilk = require('../../Images/cow_plan.png');
    const buffaloMilk = require('../../Images/buffalo_plan.png');

    return (
        <View style={styles.containerStyle}>

            <View style={styles.topContainerStyle}>
                <View style={styles.topBlueBoxContainer}>

                    <Text h4 style={styles.introTextStyle}>
                        Now, Choose how you wish to buy ? We have two plans.
                    </Text>
                    <View style={styles.imageContainerStyle}>
                        <Image 
                            source={ this.props.milkType === 'Cow Milk' ? cowMilk : buffaloMilk }
                            style={styles.topContainerImageStyle}
                            resizeMode='contain'
                            resizeMethod='scale'
                        />
                        <View style={styles.choosePlanTextContainerStyle}>
                            <Text h4 style={styles.choosePlanTextStyle}>
                                Choose your plan.
                            </Text>
                        </View>
                    </View>
                    <View style={styles.noteContainerStyle}>
                <Text style={styles.noteTextStyle}>We are excited ! Kindly select any one plan, and note that Monthly plan has various sub plans. For more info kindly choose the plan. </Text>
            </View>

                </View>
            </View>

            <View style={{flexDirection:'row', justifyContent: 'space-evenly'}}>

                <View>
                    <Card
                    containerStyle={{borderRadius: 5, width: scale(150)}} 
                    >
                        <View style={{ alignItems: 'center' }}>
                            <View style={{flexDirection: 'row'}}>
                                <Text style={styles.planNumberTextStyle}>1</Text>
                                <Text style={{ fontSize: fontScale(9.5), top: verticalScale(40), fontWeight: 'bold' }}>Day</Text>
                            </View>
                            <View style={{ paddingTop: verticalScale(2.5), paddingBottom: verticalScale(2.5), paddingLeft: scale(2.5), paddingLeft: scale(2.5) }}>
                            <Text style={styles.planDescpStyle}>Buy One day plan, by which we will deliver Cow Milk by Today.</Text>
                            </View>
                            <View style={{ paddingTop: verticalScale(13), paddingBottom: verticalScale(13), paddingLeft: scale(13), paddingLeft: scale(13) }}>
                            <Text style={styles.planNameTextStyle}>One Day Plan</Text>
                            </View>
                            <View style={{  width: scale(120), }}>
                            <Button
                            backgroundColor='#2980b9'
                            rightIcon={{name: 'arrow-forward'}}
                            title='Buy'
                            raised
                            onPress={this.onOneDayPlanButtonPressed.bind(this)}
                            />
                            </View>
                        </View>
                    </Card>
                </View>

                <View>
                    <Card
                    containerStyle={{borderRadius: 5, width: scale(150) }} 
                    >
                        <View style={{ alignItems: 'center' }}>
                            <View style={{flexDirection: 'row'}}>
                                <Text style={styles.planNumberTextStyle}>30</Text>
                                <Text style={{ fontSize: fontScale(9.5), top: verticalScale(40), fontWeight: 'bold' }}>Day's</Text>
                            </View>
                            <View style={{ paddingTop: verticalScale(2.5), paddingBottom: verticalScale(2.5), paddingLeft: scale(2.5), paddingLeft: scale(2.5) }}>
                                <Text style={styles.planDescpStyle}>We have various monthly plans, Check for more</Text>
                            </View>
                            <View style={{ paddingTop: verticalScale(13), paddingBottom: verticalScale(13), paddingLeft: scale(13), paddingLeft: scale(13) }}>
                                <Text style={styles.planNameTextStyle}>Monthly Plan</Text>
                            </View>
                            <View style={{ width: scale(120), flex: 1, }}>
                                <Button
                                backgroundColor='#2980b9'
                                rightIcon={{name: 'arrow-forward'}}
                                title='Buy'
                                raised
                                onPress={this.onMonthlyPlanButtonPressed.bind(this)}
                                />
                            </View>
                        </View>

                    </Card>
                </View>

            </View>

        </View>
    );
}
}

const styles = {

containerStyle: {
    flex: 1,
    overflow: 'scroll'
},
topBlueBoxContainer:{
    backgroundColor: '#f0ffff',
    height: verticalScale(400),
    justifyContent: 'space-evenly',
},
imageContainerStyle: {
    alignSelf: 'center'
},
topContainerImageStyle: {
    resizeMode: 'contain',
    height: verticalScale(230)
},
introTextStyle: {
    fontSize: fontScale(17.5),
    paddingLeft: scale(40),
},
choosePlanTextStyle: {
    fontSize: fontScale(20)
},
choosePlanTextContainerStyle:{
    alignSelf: 'center',
},
planNameTextStyle: {
    fontSize: fontScale(12),
    fontWeight: 'bold'
},
planNumberTextStyle: {
    fontSize: fontScale(50),
    fontWeight: 'bold',
    color: '#37BBE1',
},
planDescpStyle: {
    fontSize: fontScale(12),
    textAlign: 'center'
},
noteTextStyle: {
    fontSize: fontScale(9),
    color: '#b2bec3'
},
noteContainerStyle: {
    paddingLeft: scale(12),
    paddingRight: scale(8),

}

};

const mapStateToProps = state => {
return {
    milkType: state.order.milktype
};
};

export default connect(mapStateToProps, 
{oneDayPlanSelected,monthlyPlanSelected})(PlanSelection);

我的代码是否正确？我希望，我现在做的一切都是正确的！如果有任何错误，请指导。预期的解决方案是我的 ui 应该根据屏幕大小调整大小。

标签： javascriptandroidreactjsuser-interfacereact-native