我正在尝试创建一个 KeyboardAvoidingView
注册表单的区域。我已经将组件放到了一个在 iOS 和 Android 上可以进行实际键盘调整的地方。
但是,KeyboardAvoidingView
不是在 View 底部增加更多高度并向上滚动,而是似乎只是在压缩高度。
这是在 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,
},
})
我该如何解决这个问题,以使内容不重叠?
最佳答案
我遇到了同样的问题。我包裹了KeyboardAvoidingView
的 children 在 View
组件,然后设置 minHeight
该组件使用Dimennsions.get('window').height
.请参阅下面的示例:
<KeyboardAvoidingView keyboardVerticalOffset={20} behavior={Platform.OS === 'ios' ? 'padding' : null} style={mainWithFooter.container}>
<View style={mainWithFooter.wrapper}> ** <-- wrapper here. **
<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)}
/>
...
</View>
</View>
</KeyboardAvoidingView>
然后是风格:const windowHeight: Dimensions.get('window').height;
export default StyleSheet.create({
wrapper: {
minHeight: windowHeight,
},
...
});
您可能需要添加额外的必要样式,例如 flex
等到包装器。
关于javascript - 防止 KeyboardAvoidingView 导致内容重叠(React Native)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49175000/