Question

我对原生做出反应并且有一个我在原生文档中没有找到的问题。

我正在调查此组件KeyboardAvoidingView： https://facebook.github.io/react-native/docs/keyboardavoidingview.html

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

感谢。

Answer 1

看起来facebook尚未实现scrollViews的解决方案。但是我找到了Wix所做的解决方案，它的工作原理应该如下：）

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

Answer 3

在我的情况下，我使用了： https://github.com/APSL/react-native-keyboard-aware-scroll-view。

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

它也支持较旧的RN版本。

我的文本输入隐藏在ScrollView的一些自定义子组件中，但是该软件包对于Android和iOS都很好用

Answer 4

对于那些人，这就是我的解决方案，它将起作用并自动在焦点输入上滚动。我在博览会上尝试过，希望对您有所帮助。

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

Answer 5

经过多次尝试，这是一种同时适用于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',
   }
});

Answer 6

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

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

Answer 7

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

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

Answer 8

以下代码解决了我的问题

<KeyboardAvoidingView style={{ flex: 1, flexDirection: 'column',justifyContent: 'center'}} behavior="height" enabled   keyboardVerticalOffset={150}>
 {renderForm()}
  </KeyboardAvoidingView>

);

//，其中renderForm使用ScrollView渲染长格式

Answer 9

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

KeyboardAvoidingView与ScrollView

9 个答案: