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

问题描述 投票：0回答：6

我使用屏幕尺寸为 6 英寸的物理设备开发了一个 React Native，它看起来很棒，然后当我用 5.5 进行测试时，它非常棒，因为仍然很少有组件得到扩展！然后我尝试了4.3英寸，天哪，大部分组件都超出了屏幕范围。然后我用谷歌搜索，发现几个有助于调整屏幕尺寸的软件包，它用 5.5 修正了道具，但道具仍然保持在 4.3 英寸！

我已将大部分宽度和高度转换为 % ，只有 padding 用 int 赋值。

如何制作响应式的用户界面！我的主要疑问之一是，我创建了一个顶级视图组件，其 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);

4.3 英寸屏幕中的 Ui ：

6 英寸屏幕中的 Ui ：

检查屏幕底部，按钮组件和少量文字被溢出。我一直在按钮和卡片上使用反应原生元素，这是因为这个吗？有什么想法和建议吗？

user-interface react-native screen-size
6个回答
1
投票

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

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

或，

你可以做这样的事情

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

并将其用作暗淡：{ height:windowH/2, width: windowW}

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

确保使用-

导入尺寸 
import {StyleSheet, Dimensions} from 'react-native';
0
投票

尝试使用 

flex
属性（
flex
、
flexDirection
）并与 
alignItems
 和 
jsutifyContent
 以及所需的边距和填充对齐。

0
投票

虽然像 Harshit 提到的尺寸是一个选项，但我不喜欢它，因为例如，当用户将方向从横向更改为纵向时，值不会相应更新，并且您的用户界面很丑陋。
我更喜欢用 Flex 设置它，并确保包含大量内容的视图是 ScrollViews（适用于较小的设备）。
另外对于水平空间，如果有必要，您可以在容器视图上为手机设置 320-340 固定 dp，为平板电脑设置 820-840 固定 dp..

0
投票

我的方法是结合使用 flex [无论大小如何填充我想要的内容]、aspectRatio 属性 [无论大小如何在每个屏幕上具有相同的宽高比] 和库react-native-size -重要的是[根据屏幕缩放尺寸单位]，到目前为止，UI 响应智能手机和平板电脑 c:。哦，从来没有，我从来没有使用绝对值，ite 使 ui ，正如你所说，溢出 [xd]。

另一个巧妙的技巧是不使用高度或宽度属性，因为它们适合他们的孩子。我有一个带有 

width:'100%'
的栏，里面有一个带有 
fontSize:moderateScale(30)
[react-native-size-matters] 的文本组件，还有 
padding:moderateScale(5)
。这个简单的设置呈现相同的栏，具有响应式 ui [在小屏幕上正常，在大屏幕上更大] 7u7

0
投票

好的添加答案（抱歉延迟了） 我发现并解决了你的造型问题

在您的根视图中

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小时后...

我重建了整个用户界面只是为了演示如何使用flex，请记住我已经剪掉了一些文本，那是因为如果你需要显示文本，它需要很短，或者被包裹在滚动视图中。我已经更换了该卡，因为它在 flex 方面出现了一些问题，只需设置视图样式，给它一些填充，然后您就拥有了一张自定义卡。

我想使用react-native-size-matters，但我在这方面花了太多时间，但是，一个快速提示是，如果你可以旋转手机，并且用户界面不是完全垃圾，那么你就有了一个很棒的用户界面！丙：

https://snack.expo.io/rygco3J74

你甚至可以实现你自己的按钮...我个人不使用react-native-elements，因为我喜欢做自己的事情；）检查博览会并尝试旋转手机，你甚至可以添加一个监听器来旋转并根据旋转改变字体大小。

0
投票

useWindowDimentions() 在那里会有用 https://reactnative.dev/docs/usewindowdimensions

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.