Поскольку я разработал стандартную версию с использованием физического устройства с размером экрана 6 дюймов, он выглядел великолепно, а затем, когда я тестировал с 5.5, это было здорово, поскольку еще немного компонентов получили распространение! Тогда я попробовал с 4,3 дюйма, боже мой, большинство компонентов вышли за пределы экрана. Затем я гуглил и нашел несколько пакетов, которые помогают с размером экрана, он исправил пропелку с 5,5, но все равно пропорка сохраняется на 4,3 дюйма!
Я перевел большую часть ширины и высоты в%, только значение padding имеет значение 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);
Пользовательский интерфейс на 4,3-дюймовом экране:
пользовательский интерфейс на 6-дюймовом экране:
Проверьте нижнюю часть экрана, компоненты кнопок и несколько слов переполнены. И я использовал реагировать нативные элементы для кнопки и карты, это из-за этого? Любая идея и предложение?