我的布局具有两个输入和一个按钮,无需键盘即可很好地工作。但是,一旦我单击输入框,键盘就会出现并改变屏幕的高度。然后事情就错了。我已经尝试使用键盘避免视图。但是错误仍然存在。
import {
StyleSheet,
Text,
View,
TextInput,
Button,
KeyboardAvoidingView,
} from 'react-native';
import { Formik} from 'formik';
import React, { Component } from 'react';
class Demo extends Component {
render(){
return (
<KeyboardAvoidingView style={styles.container} behavior= "position , padding , height">
<View style={styles.container}>
<Text style={styles.titleText}>Profile settings</Text>
<View style={styles.card}>
<Formik
initialValues={{
name: '',
mobile: '',
}}
onSubmit={(values) => {
console.log(JSON.stringify(values));
}}>
{(props) => (
<View>
<TextInput
placeholder={'name'}
onChangeText={props.handleChange('name')}
value={props.values.name}
style={styles.cardTextSmall}
/>
<TextInput
placeholder={'email'}
onChangeText={props.handleChange('mobile')}
value={props.values.mobile}
style={styles.cardTextSmall}
/>
<Button
title={'submit'}
/>
</View>
)}
</Formik>
<View style={styles.centerButton}></View>
</View>
</View>
</KeyboardAvoidingView>
);
};
}
const styles = StyleSheet.create({
centerButton: {
top: '1%',
alignContent: 'center',
alignItems: 'center',
},
titleText: {
fontFamily: 'Segoe UI',
fontSize: 30,
position: 'relative',
left: '7%',
top: 72,
},
cardContent: {
paddingHorizontal: '10%',
marginHorizontal: 10,
},
cardTextLarge: {
paddingTop: '15%',
fontSize: 18,
color: '#A6A6A6',
fontFamily: 'Segoe UI',
},
cardTextSmall: {
borderBottomColor: 'black',
borderBottomWidth: 1,
fontFamily: 'Segoe UI',
fontSize: 18,
color: '#404040',
},
cardTextModule: {
paddingLeft: '15%',
paddingTop: '2%',
fontFamily: 'Segoe UI',
fontSize: 18,
width: '100%',
color: '#404040',
},
card: {
borderRadius: 6,
backgroundColor: 'red',
shadowOpacity: 0.3,
shadowOffset: {width: 1, height: 1},
marginHorizontal: 4,
left: '6.5%',
top: '19%',
height: '78%',
width: '85%',
margin: 'auto',
position: 'relative',
zIndex: -1,
},
});
export default Demo;
我是这里的初学者。如果可以的话,请给我一些解释。谢谢!
答案 0 :(得分:1)
之所以发生这种情况,是因为您使用了KeyboardAvoidingView并将其中一种行为用作填充。因此,每当您单击TextInput时,它将在视图中添加底部填充,并且视图将移至顶部。
如果您不希望发生这种情况,请使用View标记而不是KeyboardAvoidingView。