我正在尝试为注册表单创建KeyboardAvoidingView
区域。我已将组件放到iOS和Android上实际键盘调整正常的地方。
但是,KeyboardAvoidingView
似乎只是压缩高度,而不是向视图底部添加更多高度并向上滚动。
以下是对Android产生的影响:
键盘调整前:
键盘调整后:
以下是组件的代码:
<KeyboardAvoidingView keyboardVerticalOffset={20} behavior={Platform.OS === 'ios' ? 'padding' : null} style={mainWithFooter.container}>
<View style={mainWithFooter.main}>
<Text style={material.display1}>Create Your Account</Text>
</View>
<View style={mainWithFooter.footer}>
<Input
placeholder='First name'
onChangeText={t => updateSignupForm('firstName', t)}
/>
<Input
placeholder='Last name'
onChangeText={t => updateSignupForm('lastName', t)}
/>
<Input
placeholder='Email'
keyboardType='email-address'
autoCapitalize='none'
onChangeText={t => updateSignupForm('email', t)}
/>
<Input
placeholder='Password'
secureTextEntry
onChangeText={t => updateSignupForm('password', t)}
/>
<Button
text='Create Account'
onPress={signup}
primary
disabled={!signupFormIsValid}
block
/>
</View>
</KeyboardAvoidingView>
风格:
export default StyleSheet.create({
container: {
display: 'flex',
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
padding: 30,
minHeight: '100%',
},
main: {
flex: 1,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
marginBottom: 20,
},
footer: {
width: '100%',
flex: 0,
},
})
如何解决此问题,以便内容不重叠?