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