Javascript React Native KeyboardAvoidingView 覆盖了最后的文本输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43854912/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React Native KeyboardAvoidingView covers last text input
提问by Molly Harper
I'm using React Native's Keyboard Avoiding Viewwith the behavior set to padding (testing on Android).
我正在使用 React Native 的键盘避免视图，行为设置为填充（在 Android 上测试）。
I have multiple TextInputs on my screen. When I click the final TextInput, the keyboard covers it. I am now able to scroll down due to padding added from KeyboardAvoidingView, but it would be ideal to have it auto scroll on focus.
我的屏幕上有多个 TextInput。当我单击最后一个 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>
回答by farmcommand2
there is prop called keyboardVerticalOffset that you can pass to the KeyboardAvoidingView that will change how much the keyboard moves past the textInput. Sample of my code:
有一个名为 keyboardVerticalOffset 的道具，您可以将它传递给 KeyboardAvoidingView，它会改变键盘移过 textInput 的距离。我的代码示例：
const keyboardVerticalOffset = Platform.OS === 'ios' ? 40 : 0
return (
<KeyboardAvoidingView behavior='position' keyboardVerticalOffset={keyboardVerticalOffset}>
<ListView .../>
<KeyboardAvoidingView/>
)
回答by Aung Myat Hein
Depending on platform, Android or IOS, implementation can be vary a little. This is how I did.
根据平台、Android 或 IOS，实现可能略有不同。我就是这样做的。
Add android:windowSoftInputMode="adjustResize"at AndroidManifest.xml,
在 AndroidManifest.xml 中添加 android:windowSoftInputMode="adjustResize"，
<activity
android:name=".MainActivity"
android:launchMode="singleTask"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="adjustResize">
</activity>
In your container
在您的容器中
<KeyboardAvoidingView
behavior={Platform.OS === "ios" ? "padding" : null}
keyboardVerticalOffset={Platform.OS === "ios" ? 64 : 0}>
<ScrollView>
{...}
</ScrollView>
</KeyboardAvoidingView>
keyboardVerticalOffsettells how much the keyboard moves past the textInput.
keyboardVerticalOffset告诉键盘移过 textInput 的距离。
回答by Florin Dobre
https://github.com/APSL/react-native-keyboard-aware-scroll-view
https://github.com/APSL/react-native-keyboard-aware-scroll-view
I found it super simple to use and it worked great in both Android and iOS.
我发现它使用起来非常简单，而且在 Android 和 iOS 上都运行良好。
It supports older versions of RN too.
它也支持旧版本的 RN。
Initially I tried the KeyboardAvoidingViewbut on IOS not even
最初我尝试过KeyboardAvoidingView但在 IOS 上甚至没有
behavior='position'with keyboardVerticalOffsetworked properly.
behavior='position'与keyboardVerticalOffset工作正常。
They used to overlap some content in a strange way.
他们过去常常以一种奇怪的方式重叠一些内容。
I have:
我有：
RN 0.53.3
react-native-keyboard-aware-scroll-view 0.6.0
I added a few more details about my use case here:
我在此处添加了有关我的用例的更多详细信息：
回答by Richard Millen
To add to @Maxwell's answer, sometimes you may need to scroll further than the end of the scroll view to get a component into view, since the added padding is not the full height of the keyboard. Full example below using scrollTo() with y offset as the height of the text input.
要添加到@Maxwell 的答案中，有时您可能需要滚动到滚动视图的末尾才能看到组件，因为添加的填充不是键盘的整个高度。下面的完整示例使用 scrollTo()，y 偏移量作为文本输入的高度。
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>
)
}
}
