Javascript 防止键盘AVOIDGVIEW导致内容重叠（本机反应）？

我正在尝试为注册表单创建一个

键盘avoidgView

区域。我已经把这个组件放到了一个可以在iOS和Android上进行键盘调整的地方

但是，

键盘avoidingview

似乎只是压缩了高度，而不是向视图底部添加更多高度并向上滚动

以下是对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>

---

如何修复此问题，使内容不重叠？

您是否尝试将视图main WithFooter.main放在键盘外以避免出现视图？@RafaelMotta是的，我先尝试过。没有区别。

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,
  },
})