user-interface - 在 React Native 中处理不同屏幕尺寸的正确方法，

Question

因为，我使用屏幕尺寸为 6 英寸的物理设备开发了一个 React Native，它看起来很棒，然后当我用 5.5 进行测试时，它有些很棒，因为仍然很少有组件得到传播!然后我尝试了 4.3 英寸，我的天啊，大部分组件都超出了屏幕。然后我用谷歌搜索，发现很少有有助于屏幕尺寸的软件包，它用 5.5 更正了 Prop ，但 Prop 仍然保持在 4.3 英寸!

我已将大部分宽度和高度转换为 % ，只有填充值是 int 。

如何响应式地制作用户界面!我的主要疑问之一是，我创建了一个带有 flex:1 以及宽度和高度以及屏幕尺寸的顶级 View 组件。虽说，先生怎么会在小屏手机上有过之而无不及？

因为它应该只考虑屏幕尺寸 bcoz ，所以我通过获取屏幕尺寸来声明屏幕的宽度和高度。所以所有其他组件都应该在这些值之内，但它怎么会超出呢？

请指导我，在此先感谢!

更新:这是代码。

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

const windowW= Dimensions.get('window').width;
const windowH = Dimensions.get('window').height;

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}
                        />
                        <View style={styles.choosePlanTextContainerStyle}>
                            <Text h4 style={styles.choosePlanTextStyle}>
                                Choose your plan.
                            </Text>
                        </View>
                    </View>

                </View>
            </View>

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

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

                <View>
                    <Card
                    containerStyle={{borderRadius: 5,  width: windowW/2.2  
}} 
                    >
                        <View style={{ alignItems: 'center' }}>
                            <View style={{flexDirection: 'row'}}>
                                <Text style= 
{styles.planNumberTextStyle}>30</Text>
                                <Text style={{ fontSize: 12, top: 40, 
fontWeight: 'bold' }}>Day's</Text>
                            </View>
                            <View style={{ padding: 0 }}>
                                <Text style={styles.planDescpStyle}>We 
have various monthly plans, Check In for more info</Text>
                            </View>
                            <View style={{ padding: 0 }}>
                                <Text style= 
{styles.planNameTextStyle}>Monthly Plan</Text>
                            </View>
                        </View>
                        <Button
                        backgroundColor='#2980b9'
                        rightIcon={{name: 'arrow-forward'}}
                        title='Buy'
                        raised
                        onPress= 
{this.onMonthlyPlanButtonPressed.bind(this)}
                        />
                    </Card>
                </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>
    );
   }
}

 const styles = {

containerStyle: {
    flex: 1,
    height: windowH,
    width: windowW, 
},
topBlueBoxContainer:{
    backgroundColor: '#f0ffff',
    height: windowH/1.7,
    justifyContent: 'space-evenly',
},
imageContainerStyle: {
    alignSelf: 'center'
},
topContainerImageStyle: {
    resizeMode: 'contain',
    height: windowH/3
},
introTextStyle: {
    fontSize: 20,
    paddingBottom: windowH/28,
    paddingLeft: windowW/8,
},
choosePlanTextStyle: {
    fontSize: 22
},
choosePlanTextContainerStyle:{
    alignSelf: 'center',
    padding: 15
},
planNameTextStyle: {
    fontSize: 16,
    fontWeight: 'bold'
},
planNumberTextStyle: {
    fontSize: 50,
    fontWeight: 'bold',
    color: '#37BBE1'
},
planDescpStyle: {
    fontSize: 13,
    flexWrap: 'wrap',
    textAlign: 'center'

},
noteTextStyle: {
    fontSize: 10,
    color: '#b2bec3'
},
noteContainerStyle: {
    paddingTop: windowH/30,
    paddingLeft: windowW/25,
    paddingRight: windowW/10,
    bottom: windowW/22
}

};

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

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

4.3 英寸屏幕的用户界面:

6 英寸屏幕的用户界面:

检查屏幕底部，按钮组件和几个单词溢出。我一直在为按钮和卡片使用 React Native 元素，是因为这个吗？任何想法和建议？

Answer 1

您不应该使用 % 为组件提供宽度和高度，而应该使用 Dimensions 获取屏幕的宽度和高度，然后相应地调整组件样式，如 marginTop、marginBottom 等

const { width, height } = Dimensions.get('window');

或者，

你可以这样做

const windowW= Dimensions.get('window').width
const windowH = Dimensions.get('window').height

并将其用作 dims:{ height:windowH/2, width: windowW}

此外，您还可以使用 windowW/2-30 等调整宽度和高度。

确保使用 - 导入维度

import {StyleSheet, Dimensions} from 'react-native';