我正在使用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>
答案 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
我在此处添加了有关用例的更多详细信息:
答案 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>