防止 KeyboardAvoidingView 导致内容重叠（React Native）？答案

【问题标题】：Prevent KeyboardAvoidingView from causing content to overlap (React Native)?防止 KeyboardAvoidingView 导致内容重叠（React Native）？
【发布时间】：2018-03-08 14:03:34
【问题描述】：

我正在尝试为注册表单创建一个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,
  },
})

如何解决这个问题，使内容不重叠？

【问题讨论】：

您是否尝试将 View mainWithFooter.main 放在 KeyboardAvoidingView 之外？
@RafaelMotta 是的，我先尝试过。没有区别。

标签： javascript css react-native

【解决方案1】：

我遇到了同样的问题。我将KeyboardAvoidingView 的children 包裹在View 组件中，然后使用Dimennsions.get('window').height 设置该组件的minHeight。请参阅下面的示例：

<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 等。

【讨论】：