小贝子编程

当反应本机中的设备分辨率发生变化时，我的观点就会消失



问题：

我在那里创建了一个反应本机应用程序，我像这样溺爱了一个屏幕。

<View style={styles.patientView}>
<View
style={[
styles.patientContainer,
{height: (dimensions.window.height * 2.9) / 4},
]}>
<AppText styles={styles.patientFormTitle}>
{strings('new-patient.form-title')}
</AppText>
<View style={styles.formContainer}>
<NewPatientForm
navigate={() => _privacyNavigate(props.navigation)}
onpress={_onPress}
mobileNo={props.mobileNo}
loadding={props.loadding}
createpa={props.createpatient}
location={location}
/>
</View>
</View>
<View style={styles.hr} />
<View style={styles.patientBottomContainer}>
<View style={styles.patientBottomView}>
<TouchableOpacity onPress={() => _navigate(props.navigation)}>
<AppText styles={styles.bottomLinkText}>
{strings('new-patient.bottom-link')}
</AppText>
</TouchableOpacity>
</View>
</View>
</View>

这是我的新患者表格代码。

import React from 'react';
import {
View,
TextInput,
TouchableOpacity,
ScrollView,
Image,
} from 'react-native';
import {Picker} from '@react-native-community/picker';
import CheckBox from '@react-native-community/checkbox';
import styles from './newpatientstyles';
import Icon from 'react-native-vector-icons/FontAwesome';
import {Formik} from 'formik';
import * as Yup from 'yup';
import {connect} from 'react-redux';
import {patientActions} from '_store/actions';
import {strings} from '_translations/i18n';
import AppText from '_components/appText';
import spinner from '_assets/img/spinner.gif';
const NewPatient = (props) => {
const {navigate, mobileNo, onpress, loadding, createpa, location} = props;
return (
<ScrollView style={{flex: 1}}>
<Formik
initialValues={{
firstname: '',
lastname: '',
address: '',
age: '',
gender: '',
mobileNo: mobileNo,
privacy: false,
}}
validationSchema={Yup.object({
firstname: Yup.string().required(strings('new-patient.f-validation')),
lastname: Yup.string().required(strings('new-patient.l-validation')),
address: Yup.string().required(strings('new-patient.a-validation')),
age: Yup.string().required(strings('new-patient.ag-valiation')),
gender: Yup.string().required(strings('new-patient.g-validation')),
mobileNo: Yup.string()
.min(10, strings('new-patient.m-validation'))
.required(strings('new-patient.m-validation')),
privacy: Yup.boolean().oneOf(
[true],
strings('new-patient.privacy-validation'),
),
})}
enableReinitialize={mobileNo}
onSubmit={(values, formikActions) => {
onpress(values, createpa, location);
setTimeout(() => {
formikActions.setSubmitting(false);
}, 500);
}}>
{(formprops) => (
<View>
<View
style={
!formprops.values.firstname && !formprops.errors.firstname
? styles.inputView
: formprops.values.firstname &&
!formprops.errors.firstname &&
formprops.touched.firstname
? styles.validInputView
: formprops.errors.firstname && formprops.touched.firstname
? styles.inputViewError
: styles.inputView
}>
<TextInput
style={styles.textField}
placeholder={strings('new-patient.f-placeholder')}
placeholderTextColor="#bbbbbb"
value={formprops.values.firstname}
onChangeText={formprops.handleChange('firstname')}
onBlur={formprops.handleBlur('firstname')}
keyboardType="default"
/>
{formprops.errors.firstname && formprops.touched.firstname ? (
<Icon name="times" size={20} style={styles.errorIcon} />
) : null}
{!formprops.errors.firstname &&
formprops.values.firstname &&
formprops.touched.firstname ? (
<Icon name="check" size={20} style={styles.validIcon} />
) : null}
</View>
{formprops.touched.firstname && formprops.errors.firstname ? (
<View style={styles.errorMessage}>
<AppText styles={styles.errorMessageText}>
{formprops.errors.firstname}
</AppText>
</View>
) : null}
<View
style={
!formprops.values.lastname && !formprops.errors.lastname
? styles.inputView
: formprops.values.lastname &&
!formprops.errors.lastname &&
formprops.touched.lastname
? styles.validInputView
: formprops.errors.lastname && formprops.touched.lastname
? styles.inputViewError
: styles.inputView
}>
<TextInput
style={styles.textField}
placeholder={strings('new-patient.l-placeholder')}
placeholderTextColor="#bbbbbb"
value={formprops.values.lastname}
onChangeText={formprops.handleChange('lastname')}
onBlur={formprops.handleBlur('lastname')}
keyboardType="default"
/>
{formprops.errors.lastname && formprops.touched.lastname ? (
<Icon name="times" size={20} style={styles.errorIcon} />
) : null}
{!formprops.errors.lastname &&
formprops.values.lastname &&
formprops.touched.lastname ? (
<Icon name="check" size={20} style={styles.validIcon} />
) : null}
</View>
{formprops.touched.lastname && formprops.errors.lastname ? (
<View style={styles.errorMessage}>
<AppText styles={styles.errorMessageText}>
{formprops.errors.lastname}
</AppText>
</View>
) : null}
<View
style={
!formprops.values.address && !formprops.errors.address
? styles.inputView
: formprops.values.address &&
!formprops.errors.address &&
formprops.touched.address
? styles.validInputView
: formprops.errors.address && formprops.touched.address
? styles.inputViewError
: styles.inputView
}>
<TextInput
style={styles.textField}
placeholder={strings('new-patient.ad-placeholder')}
placeholderTextColor="#bbbbbb"
value={formprops.values.address}
onChangeText={formprops.handleChange('address')}
onBlur={formprops.handleBlur('address')}
keyboardType="default"
/>
{formprops.errors.address && formprops.touched.address ? (
<Icon name="times" size={20} style={styles.errorIcon} />
) : null}
{!formprops.errors.address &&
formprops.values.address &&
formprops.touched.address ? (
<Icon name="check" size={20} style={styles.validIcon} />
) : null}
</View>
{formprops.touched.address && formprops.errors.address ? (
<View style={styles.errorMessage}>
<AppText styles={styles.errorMessageText}>
{formprops.errors.address}
</AppText>
</View>
) : null}
<View
style={
!formprops.values.age && !formprops.errors.age
? styles.inputView
: formprops.values.age &&
!formprops.errors.age &&
formprops.touched.age
? styles.validInputView
: formprops.errors.age && formprops.touched.age
? styles.inputViewError
: styles.inputView
}>
<TextInput
style={styles.textField}
placeholder={strings('new-patient.a-placeholder')}
placeholderTextColor="#bbbbbb"
value={formprops.values.age}
onChangeText={formprops.handleChange('age')}
onBlur={formprops.handleBlur('age')}
keyboardType="numeric"
/>
{formprops.errors.age && formprops.touched.age ? (
<Icon name="times" size={20} style={styles.errorIcon} />
) : null}
{!formprops.errors.age &&
formprops.values.age &&
formprops.touched.age ? (
<Icon name="check" size={20} style={styles.validIcon} />
) : null}
</View>
{formprops.touched.age && formprops.errors.age ? (
<View style={styles.errorMessage}>
<AppText styles={styles.errorMessageText}>
{formprops.errors.age}
</AppText>
</View>
) : null}
<View
style={
!formprops.values.gender
? styles.inputView
: styles.validInputView
}>
<Picker
selectedValue={formprops.values.gender}
style={styles.picker}
mode="dropdown"
onValueChange={(itemValue, itemIndex) =>
formprops.setFieldValue('gender', itemValue)
}>
<Picker.Item
label={strings('new-patient.s-placeholder')}
value="0"
color="#bbbbbb"
/>
<Picker.Item
label={strings('new-patient.male')}
value={strings('new-patient.male')}
/>
<Picker.Item
label={strings('new-patient.female')}
value={strings('new-patient.female')}
/>
</Picker>
{formprops.errors.gender && formprops.touched.gender ? (
<Icon name="times" size={20} style={styles.errorIcon} />
) : null}
{!formprops.errors.gender &&
formprops.values.gender &&
formprops.touched.gender ? (
<Icon name="check" size={20} style={styles.validIcon} />
) : null}
</View>
<View
style={
!formprops.values.mobileNo && !formprops.errors.mobileNo
? styles.inputView
: formprops.values.mobileNo && !formprops.errors.mobileNo
? styles.validInputView
: styles.inputViewError
}>
<TextInput
style={styles.textField}
placeholder={strings('new-patient.mobileNo')}
placeholderTextColor="#bbbbbb"
value={formprops.values.mobileNo}
onChangeText={formprops.handleChange('mobileNo')}
onBlur={formprops.handleBlur('mobileNo')}
keyboardType="numeric"
/>
{formprops.touched.mobileNo && formprops.errors.mobileNo ? (
<Icon name="times" size={20} style={styles.errorIcon} />
) : null}
{formprops.values.mobileNo && !formprops.errors.mobileNo ? (
<Icon name="check" size={20} style={styles.validIcon} />
) : null}
</View>
{formprops.touched.mobileNo && formprops.errors.mobileNo ? (
<View style={styles.errorMessage}>
<AppText styles={styles.errorMessageText}>
{formprops.errors.mobileNo}
</AppText>
</View>
) : null}
<View style={styles.checkBoxContainer}>
<CheckBox
tintColors={{true: '#007aff', false: '#007aff'}}
value={formprops.values.privacy}
onValueChange={(value) =>
formprops.setFieldValue('privacy', value)
}
/>
<AppText styles={styles.termsText}>
{strings('new-patient.privacy-text')}
</AppText>
<View style={styles.termsLinkView}>
<TouchableOpacity onPress={navigate}>
<AppText styles={styles.termsLink}>
{' '}
{strings('new-patient.privacy-link')}
</AppText>
</TouchableOpacity>
</View>
</View>
{formprops.touched.privacy && formprops.errors.privacy ? (
<View style={styles.errorMessage}>
<AppText styles={styles.errorMessageText}>
{formprops.errors.privacy}
</AppText>
</View>
) : null}
<TouchableOpacity
style={styles.sendButton}
onPress={formprops.handleSubmit}>
{loadding ? (
<Image source={spinner} style={styles.bimage} />
) : (
<AppText styles={styles.sendButtonText}>
{strings('new-patient.btn-text')}
</AppText>
)}
</TouchableOpacity>
</View>
)}
</Formik>
</ScrollView>
);
};
export default NewPatient;

这是我的造型

import {StyleSheet} from 'react-native';
const styles = StyleSheet.create({
patientView: {
display: 'flex',
flex: 1,
backgroundColor: '#eeeeee',
flexDirection: 'column',
},
patientTitleView: {
alignItems: 'center',
marginTop: '5%',
},
patientTitle: {
fontSize: 20,
fontWeight: '300',
fontStyle: 'normal',
textAlign: 'center',
color: '#444444',
},
patientFormTitle: {
fontSize: 25,
fontWeight: '200',
fontStyle: 'normal',
textAlign: 'center',
color: '#444444',
alignItems: 'center',
marginTop: 20,
},
hr: {
marginTop: 40,
marginBottom: 5,
borderBottomColor: '#c3c3c3',
borderBottomWidth: 2.0,
marginRight: 30,
marginLeft: 30,
},
patientBottomContainer: {
height: 50,
},
patientBottomView: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
},
patientBottomContainerText: {
fontSize: 13,
color: '#444444',
fontWeight: '500',
},
formContainer: {
flex: 1,
marginRight: 30,
marginLeft: 30,
},
patientBottomLinkView: {
paddingLeft: 20,
flex: 1,
alignItems: 'flex-start',
justifyContent: 'center',
},
patientBottomContainerTextView: {
flex: 1,
justifyContent: 'center',
alignItems: 'flex-end',
paddingLeft: 30,
},
bottomLinkText: {
fontSize: 13,
color: '#484848',
borderBottomWidth: 2,
borderBottomColor: '#c3c3c3',
},
errorMessage: {},
errorMessageText: {
color: '#ff3d3d',
fontSize: 18,
marginTop: 10,
},
patientContainer: {
marginTop: 50,
backgroundColor: '#f2f2f2',
elevation: 10,
shadowColor: '#000',
shadowOffset: {width: 0, height: 3},
shadowOpacity: 0.5,
shadowRadius: 5,
},
submitButtonView: {
marginTop: 30,
},
patienterrorInput: {
marginTop: 40,
borderBottomColor: '#ff3d3d',
fontFamily: 'Montserrat-Medium',
borderBottomWidth: 2,
fontSize: 16,
fontWeight: '500',
},
inputView: {
marginTop: 10,
flexDirection: 'row',
borderBottomColor: '#cccccc',
borderBottomWidth: 2,
},
inputViewError: {
// flex: 1,
marginTop: 10,
flexDirection: 'row',
borderBottomColor: '#ff3d3d',
borderBottomWidth: 2,
},
validInputView: {
marginTop: 10,
flexDirection: 'row',
borderBottomColor: '#007aff',
borderBottomWidth: 2,
},
errorIcon: {
marginTop: 15,
color: '#ff3d3d',
},
validIcon: {
marginTop: 15,
color: '#007aff',
},
textField: {
flex: 1,
fontFamily: 'Montserrat-Medium',
fontSize: 16,
fontWeight: '500',
paddingLeft: 0,
},
picker: {
flex: 1,
fontFamily: 'Montserrat-Medium',
fontSize: 16,
fontWeight: '500',
backgroundColor: '#f2f2f2',
letterSpacing: 2,
marginLeft: -5,
},
checkBoxContainer: {
flexDirection: 'row',
alignItems: 'center',
marginTop: 10,
},
termsText: {
color: '#888888',
fontWeight: '500',
fontSize: 15,
},
termsLink: {
fontWeight: '500',
color: '#222222',
fontSize: 15,
borderBottomColor: '#c3c3c3',
borderBottomWidth: 2.0,
},
termsLinkView: {
flex: 1,
marginLeft: 5,
alignItems: 'center',
},
sendButton: {
flex: 1,
backgroundColor: '#007aff',
paddingTop: 15,
paddingBottom: 15,
alignItems: 'center',
borderRadius: 50,
marginTop: 25,
marginBottom: 20,
justifyContent: 'center',
},
sendButtonText: {
fontFamily: 'Montserrat-Medium',
color: '#ffffff',
fontWeight: '300',
fontSize: 18,
textAlign: 'center',
letterSpacing: 2,
},
bimage: {
width: 30,
height: 30,
},
});
export default styles;

我根据设备高度将高度指定为中间视图。因此，当某些设备上的分辨率发生变化时，底部视图会消失在屏幕之外。那么有人可以帮助我解决这个问题吗？谢谢。

当边距值等内容使视图组件更高或更宽时，设置视图的高度不会阻止视图展开。 您可以按百分比设置所有边距，以便它们能够适应设备尺寸。

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium