KeyboardAvoidingView“填充”无法正常工作答案

【问题标题】：KeyboardAvoidingView "Padding" not working properlyKeyboardAvoidingView“填充”无法正常工作
【发布时间】：2019-01-17 16:04:00
【问题描述】：

我遇到了 KeyboardAvoidingView 的问题，我有 3 个 TextInput，当我想在最后一个上写一些东西时，这个被我的键盘偷了。

export default class App extends React.Component {
  render() {
    return (
      <LinearGradient colors={['#72afd3', '#37ecba']} style={styles.container}>
        <KeyboardAvoidingView behavior='padding' enabled>
          <TextInput placeholder='Hello World'/>
          <View style={{height: 200}}/>
          <TextInput placeholder='Hello World'/>
          <View style={{height: 200}}/>
          <TextInput placeholder='Hello World'/>
        </KeyboardAvoidingView>
      </LinearGradient>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
})

【问题讨论】：

你在安卓上看到这个问题了吗？
是的，我用安卓手机测试
如果您使用 expo，这可能会有所帮助。我有一个类似的问题，状态栏干扰了布局。我通过在 app.json 文件中指定状态栏设置来修复它。您可以在此处阅读如何执行此操作。 docs.expo.io/versions/latest/workflow/configuration#__next

标签： javascript node.js react-native

【解决方案1】：

使用keyboardVerticalOffset 这样textInput 就不会隐藏在键盘后面

<KeyboardAvoidingView
   style={{ flex: 1 }}
   behavior={(Platform.OS === 'ios') ? "padding" : null} enabled
   keyboardVerticalOffset={Platform.select({ios: 80, android: 500})}>

对于遇到position:'absolute' View 问题的任何人一直被键盘推着，把View放进去 KeyboardAvoidingView

    <KeyboardAvoidingView
       style={{ flex: 1 }}
       behavior={(Platform.OS === 'ios') ? "padding" : null} enabled>

      //content here


     <Button  title="Login" style={{position:'absolute', bottom:20}}/>

   </KeyboardAvoidingView>

【讨论】：

【解决方案2】：

我正在使用 react-native-keyboard-aware-scroll-view。

这可能会起作用：

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';

<KeyboardAwareScrollView enableOnAndroid extraScrollHeight={pixels[50]}>
   <LinearGradient colors={['#72afd3', '#37ecba']} style={styles.container}>
          <TextInput placeholder='Hello World'/>
          <View style={{height: 200}}/>
          <TextInput placeholder='Hello World'/>
          <View style={{height: 200}}/>
          <TextInput placeholder='Hello World'/>
    </LinearGradient>
</KeyboardAwareScrollView>

【讨论】：

【解决方案3】：

通常，在 Android 上，如果没有提供行为道具，您想要的结果会更好。而在 iOS 上填充可能是正确的答案。请参阅https://facebook.github.io/react-native/docs/keyboardavoidingview#behavior上的注释

我通常会这样写：

<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : undefined}>
    // ...
</KeyboardAvoidingView>

【讨论】：

我已经尝试过这个，在这种情况下它根本不起作用
啊，那么您的内容总体上可能非常高。您可能需要使用滚动视图解决方案。类似于 Yossi 的答案，使用 react-native-keyboard-aware-scroll-view 或 wix 解决方案 react-native-keyboard-aware-scrollview。

【解决方案4】：

我使用了@Emma 的答案，但使用keyboardVerticalOffset 修复了偏移量。我用了下面一个。

<KeyboardAvoidingView
        style={styles.keyboardAvoidContainer}
        enabled
        behavior={"padding"} // you can change that by using Platform
        keyboardVerticalOffset={Platform.select({ ios: 60, android: 78 })}
      >

我给 60 到 ios 的 VerticalOffset 并进行了测试，因为它完全适合包含 iPhone X, iPhone 8 and iPhone 6 的几个模拟器。然后在 Android Nexus Emulator 中，它的值是 78。

【讨论】：