Javascript React本机键盘AVOIDGVIEW覆盖最后一次文本输入

我正在使用React Native，其行为设置为padding（在Android上测试）

我的屏幕上有多个文本输入。当我点击最后的文本输入时，键盘会覆盖它。我现在可以向下滚动，因为从键盘AVOIDGVIEW添加了填充，但最好是在焦点上自动滚动

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

---

要添加到@Maxwell的答案中，有时您可能需要滚动到滚动视图的末尾以外，才能将组件放入视图中，因为添加的填充不是键盘的全高。下面的完整示例使用带有y偏移量的scrollTo（）作为文本输入的高度

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

import React，{Component}来自“React”
进口{
键盘避免了gView，
滚动视图，
看法
文本输入框
}从“反应本机”
导出默认类测试扩展组件{
render（）{
返回(
this.refs['scroll'].scrollTo（{y:60}）}/>
)
} 
}

有一个称为keyboardVerticalOffset的道具，您可以将它传递到键盘AvoidingView，它将改变键盘经过文本输入的移动量。 我的代码示例：

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

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

const keyboardVerticalOffset=Platform.OS=='ios'？40 : 0
返回(
)

根据平台、Android或IOS的不同，实现可能略有不同。我就是这样做的

在AndroidManifest.xml中添加android:WindowsOfInputMode=“adjustResize”

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

{...}

键盘垂直偏移量表示键盘超过文本输入的移动量。

我发现它使用起来非常简单，在Android和iOS上都非常好用

它也支持旧版本的RN

起初我尝试了

键盘avoidingview

，但在IOS上甚至没有

behavior='position'

与

keyboardVerticalOffset

一起正常工作

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

我有：

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

我在这里添加了关于我的用例的更多细节：

---

基于@Richard Millen，这种风格有些变化

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

...

谢谢，@Richard Millen。我试过这个，但它的功能似乎有所不同，这取决于我在屏幕上的位置。谢谢你让我知道我应该把scrollview放在键盘的外层AvoidingView。我发现使用100更令人愉快（个人意见）谢谢！将keyboardVerticalOffset设置为64对我来说非常有效。但我不知道这个偏移量意味着什么，你能告诉我更多的细节吗？这是我能找到的唯一解决方案，它解决了

键盘avoidingview

无法解决的所有不同问题。