React Native KeyboardAvoidingView涵盖了最后的文本输入

时间:2017-05-08 18:33:40

标签: javascript react-native

我正在使用React Native的Keyboard Avoiding View,其行为设置为padding(在Android上进行测试)。

我的屏幕上有多个TextInputs。当我单击最终的TextInput时,键盘会覆盖它。我现在可以向下滚动,因为从KeyboardAvoidingView添加了填充,但是它可以自动滚动焦点。

<Content>
  <KeyboardAvoidingView behavior='padding'>
    <TextInput placeholder='Example 1' />
    <TextInput placeholder='Example 2' />
    <TextInput placeholder='Example 3' />
    <TextInput placeholder='Example 4' />
    <TextInput placeholder='Example 5' />
    <TextInput placeholder='Example 6' />
    <TextInput placeholder='Example 7' />
  </KeyboardAvoidingView>
</Content>

5 个答案:

答案 0 :(得分:11)

有一个名为keyboardVerticalOffset的道具,您可以传递给KeyboardAvoidingView,它将改变键盘移过textInput的程度。 我的代码示例:

const keyboardVerticalOffset = Platform.OS === 'ios' ? 40 : 0

    return (
      <KeyboardAvoidingView behavior='position' keyboardVerticalOffset={keyboardVerticalOffset}>
        <ListView .../>
      <KeyboardAvoidingView/>
    )

答案 1 :(得分:4)

根据平台,Android或IOS,实施可能会有所不同。这就是我的做法。

在AndroidManifest.xml添加 android:windowSoftInputMode =&#34; adjustResize&#34;

 <activity
    android:name=".MainActivity"
    android:launchMode="singleTask"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:windowSoftInputMode="adjustResize">

 </activity>

在你的容器中

    <KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : null}
      keyboardVerticalOffset={Platform.OS === "ios" ? 64 : 0}>
      <ScrollView>
        {...}
      </ScrollView>
    </KeyboardAvoidingView>

keyboardVerticalOffset 表示键盘移过textInput的程度。

答案 2 :(得分:2)

https://github.com/APSL/react-native-keyboard-aware-scroll-view

我发现它使用起来超级简单,并且在Android和iOS上都很好用。

它也支持旧版本的RN。

最初,我尝试了KeyboardAvoidingView,但在IOS上甚至没有尝试

behavior='position'keyboardVerticalOffset正常工作。

它们过去常常以一种奇怪的方式重叠某些内容。

我有:

RN 0.53.3
react-native-keyboard-aware-scroll-view 0.6.0

我在此处添加了有关用例的更多详细信息:

https://stackoverflow.com/a/51151496/1979861

答案 3 :(得分:1)

要添加到@Maxwell的答案,有时您可能需要滚动滚动视图的末尾以使组件进入视图,因为添加的填充不是键盘的完整高度。下面的完整示例使用scrollTo(),y offset作为文本输入的高度。

import React, { Component } from 'react'
import {
    KeyboardAvoidingView,
    ScrollView,
    View,
    TextInput
} from 'react-native'


export default class Test extends Component {
    render() {
        return (
            <ScrollView style = {{flex:1, backgroundColor: 'white'}} ref = 'scroll'>
              <KeyboardAvoidingView behavior='position' style = {{backgroundColor: 'white', flex: 1}}>
                    <View style = {{height: 400}}/>
                    <TextInput style = {{height: 60}} placeholder='Example 1' />
                    <TextInput style = {{height: 60}} placeholder='Example 2' />
                    <TextInput style = {{height: 60}} placeholder='Example 3' />
                    <TextInput style = {{height: 60}} placeholder='Example 4' onFocus = {() => this.refs['scroll'].scrollTo({y: 60})}/>
              </KeyboardAvoidingView>
            </ScrollView>
        )
    } 
}

答案 4 :(得分:0)

基于@Richard Millen,这种风格有所改变

<ScrollView
  contentContainerStyle={{
    flexGrow: 1,
    padding: 20
  }}
>
  <TextInput
    style = {{ minHeight: 100 }}
  />
  <TextInput
    style = {{ minHeight: 100 }}
  />
  ...
</ScrollView>