KeyboardAvoidingView 与 ScrollView答案

【问题标题】：KeyboardAvoidingView with ScrollViewKeyboardAvoidingView 与 ScrollView
【发布时间】：2017-03-19 06:00:36
【问题描述】：

我是 react native 的新手，有一个问题是我在 react native 文档中没有找到的。

我正在研究这个组件KeyboardAvoidingView： https://facebook.github.io/react-native/docs/keyboardavoidingview.html

问题很简单 - 有没有人可以让 KeyboardAvoidingView 与 ScrollView 很好地合作？我在一个组件中有很多TextInputs（TextInputs 高度的总和大于设备高度），一旦出现键盘，我就会遇到各种问题..
如果我使用View 而不是ScrollView 那么一切都很好，但我不能使用它，因为我需要比设备高度更多的空间.. 我在 KeyboardAvoidingView 文档中找不到任何关于 Scroll 的信息。

谢谢。

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

这就是我的解决方案，它可以工作并在焦点输入时自动滚动。我在 Expo 上尝试过，希望对您有所帮助。

<KeyboardAvoidingView style={{ flex: 1, flexDirection: 'column',justifyContent: 'center',}} behavior="padding" enabled   keyboardVerticalOffset={100}>
    <ScrollView>
        <View style={Styles.row}>
            //your view
        </View>
    </ScrollView>
</KeyboardAvoidingView>

【讨论】：

在 apk 构建中为我工作，但在 expo 构建中没有，不用担心哈哈：D
效果很好，谢谢。不知道为什么这个不是正确答案……他甚至没有选择一个。
我只需要behavior="padding"
不是完美的行为，但对我来说比仅使用 behavior="padding" 效果更好。谢谢。
这是自定义代码，不是来自任何库。我只是有一个单独的样式文件来保持代码的整洁

【解决方案2】：

我也尝试在互联网上找到解决方案，但我自己想通了。我能够让keyboardAvoidingView 在 iPhone SE 模拟器上与ScrollView 一起工作。

我使用填充类型position，将keyboardVerticalOffset 设置为更高的值。我希望这对陷入这种情况的每个人都有帮助。

render() {
  return (
    <View style={...}>
      <ScrollView>
        <KeyboardAvoidingView
          style={{ flex: 1 }}
          keyboardVerticalOffset={100}
          behavior={"position"}
        >
          <TextInput style={styles.editInput} ... />
        </KeyboardAvoidingView>
      </ScrollView>
    </View>
  );
}

【讨论】：

不完美但工作正常，我猜偏移量是由一些 Header 组件引起的（比如由反应导航创建的那个）
这是唯一对我有用的答案。谢谢！
在我的情况下，表单末尾的按钮被卡在了 android 的导航栏（返回、主页、最近）下。显然，KeyboardAvoidingView 正在包装 ScrollView。谢谢！

【解决方案3】：

看起来 facebook 还没有实现滚动视图的解决方案。但是我找到了由 Wix react-native-keyboard-aware-scrollview 提供的解决方案，它的工作原理应该如此:)

npm i react-native-keyboard-aware-scrollview --save

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

<KeyboardAwareScrollView style={styles.container}>
  <TextInput style={styles.textInput} placeholder={'My Input'} />
</KeyboardAwareScrollView>

【讨论】：

请注意，Wix 的 react-native-keyboard-aware-scrollview 和 APSL 的 react-native-keyboard-aware-scroll-view 之间存在差异。注意到那里多余的破折号了吗？一定要爱上 npm...
我还可以补充一点，这两个不同的库都破坏了我的滚动视图，并且每次我输入文本字段时都会在底部添加越来越多的填充。可能是它与我的弹性代码结合的方式
没关系，这是由第二个嵌套的 KeyboardAvoidingView 引起的。这两个模块之间没有太大的区别，但我发现 APSL 的“with dash”比 Wix 的响应更快

【解决方案4】：

就我而言，我使用了： https://github.com/APSL/react-native-keyboard-aware-scroll-view.

<KeyboardAwareScrollView>
  ....
  <MyContainerComponent>
    ....
    <MyFormComponentWithInputs />
  </MyContainerComponent>
</KeyboardAwareScrollView>

它也支持旧的 RN 版本。

我的文本输入隐藏在某个深处，是 ScrollView 的一些自定义子组件，但该包对 Android 和 iOS 都非常有效

【讨论】：

在我的情况下比 keyboardVerticalOffset 好。使用起来真的很简单。非常感谢！

【解决方案5】：

<View style={{flex:1}}>
   <KeyboardAvoidingView
     style={{flex:1}}
     behavior={Platform.OS === 'ios' ? 'position' : null}
     keyboardVerticalOffset={Platform.OS === 'ios' ? 50 : 70}
   >
    <ScrollView> // no need to put here style={{flex:1}}
      <TextInput />
      <TextInput />
      <TextInput />
      <TextInput />
    </ScrollView>
  </KeyboardAvoidingView>
</View>

【讨论】：

这应该被标记为正确答案。谢谢;-)

【解决方案6】：

我也面临这个问题，花了4个多小时才弄清楚这个问题，最后找到这个解决方案。

<KeyboardAvoidingView style={{ flex: 1, flexDirection: 'column',justifyContent: 'center'}} behavior="position" enabled   keyboardVerticalOffset={200}>
<ScrollView>
  <Text style={{padding:10,fontSize:42}}>Text 1</Text>
  <Text style={{padding:10,fontSize:42}}>Text 2</Text>
  <Text style={{padding:10,fontSize:42}}>Text 3</Text>
  <Text style={{padding:10,fontSize:42}}>Text 4</Text>
  <Text style={{padding:10,fontSize:42}}>Text 5</Text>
  <Text style={{padding:10,fontSize:42}}>Text 6</Text>
  <Text style={{padding:10,fontSize:42}}>Text 7</Text>
  <Text style={{padding:10,fontSize:42}}>Text 8</Text>
  <Text style={{padding:10,fontSize:42}}>Text 9</Text>
  <Text style={{padding:10,fontSize:42}}>Text 10</Text>
  <Text style={{padding:10,fontSize:42}}>Text 11</Text>
  <Text style={{padding:10,fontSize:42}}>Text 12</Text>
  <TextInput style={styles.input}
    placeholder="Type some text...">
  </TextInput>
  </ScrollView>
</KeyboardAvoidingView>

【讨论】：

【解决方案7】：

经过这么多尝试，这是一款适用于 iOS 和 Android 的版本：

<KeyboardAvoidingView
    style={styles.keyboard}
    behavior={Platform.OS == "ios" ? "padding" : "height"}
    enabled
    keyboardVerticalOffset={10}
>
   <ScrollView>
   ...
   </ScrollView>
</KeyboardAvoidingView>

至于风格：

const styles = StyleSheet.create({
   keyboard: {
      flex: 1,
      flexDirection: 'column',
      justifyContent: 'center',
   }
});

【讨论】：

RN flex 元素的默认flexDirection 是column，因此不需要样式

【解决方案8】：

下面的代码解决了我的问题

<KeyboardAvoidingView 
  style={{ flex: 1, flexDirection: 'column',justifyContent: 'center'}}
  behavior={Platform.OS == "ios" ? "padding" : "height"} 
  keyboardVerticalOffset={150}
  enabled>
     {renderForm()}  // renderForm render the long form with ScrollView
</KeyboardAvoidingView>

【讨论】：

【解决方案9】：

我遇到了同样的问题，虽然我有一个不同的方法，基本上会在键盘出现时计算和定位（使用 translateY）视图。

我已经在 github 和 NPM react-native-spacer 上发布了解决方案。

【讨论】：

非常感谢，我被困在非常糟糕的代码中，尝试了很多东西都没有成功，但你拯救了我的一天

【解决方案10】：

在 ios 平台上不是完美的行为，使用 KeyboardAwareScrollView 代替 KeyboardAvoidingView。

【讨论】：

不是一个有效的候选人。请提供有关您的答案的更多信息。