Question

因此，我使用屏幕尺寸为6英寸的物理设备开发了一个react native，它看起来很棒，然后当我用5.5进行测试时，它看起来很棒，因为仍然只有很少的组件可以扩展！然后，我尝试使用4.3英寸，大多数组件超出了屏幕范围。然后我用谷歌搜索，发现很少有可以改善屏幕尺寸的软件包，它用5.5校正了道具，但道具仍然保持在4.3英寸！

我已将大多数宽度和高度转换为％，只有padd的值是int。

如何快速制作用户界面！我的主要疑问之一是，我创建了一个顶级的View组件，其中包含flex：1以及具有屏幕尺寸的宽度和高度。即使如此，这位先生又如何超越小屏幕手机？

因为它应该只考虑屏幕尺寸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);

Ui在4.3英寸屏幕中：

Ui in 6 Inch屏幕：

检查屏幕底部，按钮组件和少量单词溢出。我一直在使用按钮和卡片的react native元素，是因为这个吗？有什么想法和建议吗？

Answer 1

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

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

OR

您可以做这样的事情

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

并将其用作暗处：{height：windowH / 2，width：windowW}

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

确保使用-

导入尺寸

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

Answer 2

尝试使用flex属性（flex，flexDirection）并与alignItems和jsutifyContent以及所需的边距和填充对齐。

Answer 3

尽管提到了“ Harshit”之类的“尺寸”选项，但我不喜欢它，因为例如，当用户将方向从横向更改为纵向时，值不会相应更新，并且用户界面很丑。
我更喜欢使用flex进行设置，并确保内容丰富的视图是ScrollViews（用于较小的设备）。
同样对于水平空间，如果必要的话，可以在容器视图上为手机设置320-340固定dp，为平板电脑设置820-840固定dp。

Answer 4

我的方法是结合使用flex [以填充我想要的任何尺寸]，aspectRatio属性[无论尺寸在每个屏幕上都具有相同的长宽比]，以及库react-native -size-matters [以使大小单位按屏幕比例缩放]，到目前为止，ui可以响应智能手机和平板电脑c:。哦，从不，我从不使用绝对值，ite使ui像您所说的那样溢出[xd]。

另一个巧妙的技巧就是不使用height或width属性，因为它们适合孩子。我有一个带有width:'100%'的栏，并且里面有一个文本组件，它带有fontSize:moderateScale(30) [react-native-size-matters]和padding:moderateScale(5)。这种简单的设置可以渲染相同的条形，并具有响应式ui [在小屏幕上正常，在大屏幕上较大）7u7

Answer 5

确定添加答案（抱歉，延迟）我发现并解决了您的样式问题

在您的根视图中

containerStyle: {
    flex: 1, //This already tells that it should fill all space available, no need for width or height
    //height: windowH,
    //width: windowW, 
},

topContainerStyle在您的代码中不存在，所以我不知道

更新 2小时后...

我已经重建了整个ui只是为了演示应如何使用flex，请记住我已经删去了一些文本，这是因为如果您需要显示文本，则文本必须简短或包装在其中滚动视图。我已经更换了卡，因为它给flex带来了一些问题，只需对视图进行样式设置，为其添加一些填充，您便拥有了自定义卡。

我想使用react-native-size-matters，但是我花了很多时间，不过，一个简单的提示是，如果您可以旋转手机，并且ui并不是完全垃圾箱，很棒的用户界面！ c：

https://snack.expo.io/rygco3J74

您甚至可以实现自己的按钮...我个人不使用react-native-elements，因为我喜欢自己动手；）检查博览会并尝试旋转手机，甚至可以向其中添加听众旋转并根据旋转更改字体大小。

正确处理不同屏幕尺寸的正确方法

5 个答案: