键盘识别滚动视图Android问题 [英] Keyboard aware scroll view Android issue
问题描述
我已经使用Expo XDE(xde-2.19.3)创建了一个反应本机项目,在屏幕上有几个TextInputs
.我使用KeyboardAwareScrollView
将键盘下方的输入滚动到视图中,并且在iOS上可以正常使用,但在Android上则无法使用.希望有道理.
查看了KeyboardAwareScrollView
文档,发现我需要配置AndroidManifest.xml
,但似乎Expo已经解决了这个问题:解决方案
我为跨平台支持尝试了上述解决方案,但它不正确.如果您希望通过自动滚动到TextInput的焦点起作用,则正确而完整的解决方案是按如下所示设置参数:
<KeyboardAwareScrollView
enableOnAndroid={true}
enableAutomaticScroll={(Platform.OS === 'ios')}
>
...
</KeyboardAwareScrollView>
这是因为默认情况下启用enableAutomaticScroll,并且它与Android的本机行为混合在一起以提供意外的结果.因此,如果平台为Android,则将此字段设置为false.
是的,还可以在app.json
中设置以下内容,否则将无法使用.
"androidStatusBar": {
"backgroundColor": "#000000"
}
I've created a react native project using Expo XDE (xde-2.19.3) with a few TextInputs
on the screen. Im using KeyboardAwareScrollView
to scroll the inputs from under the keyboard into view and works fine on iOS but does not work on Android. Hope that makes sense.
Looked at the KeyboardAwareScrollView
docs and saw that I need to configure AndroidManifest.xml
but it seems that Expo has already sorted this out: https://github.com/expo/expo/blob/master/template-files/android/AndroidManifest.xml
However I'm still not able to get this working on Android...
What could I be missing?
render() {
return (
<KeyboardAwareScrollView
enableOnAndroid='true'
enableAutoAutomaticScrol='true'
keyboardOpeningTime={0}
>
<ScrollView style={styles.container}>
<View style={styles.subcontainer}>
<View style={styles.form}>
<TextInput
ref='NoduleCountInput'
onFocus={() => this.onFocus()}
onBlur={() => this.onBlur()}
keyboardType='phone-pad'
returnKeyType='done'
placeholder='Test'
style={styles.field}
/>
<TextInput
ref='NoduleCountInput'
onFocus={() => this.onFocus()}
onBlur={() => this.onBlur()}
keyboardType='phone-pad'
returnKeyType='done'
placeholder='Test'
style={styles.field}
/>
<TextInput
ref='NoduleCountInput'
onFocus={() => this.onFocus()}
onBlur={() => this.onBlur()}
keyboardType='phone-pad'
returnKeyType='done'
placeholder='Test'
style={styles.field}
/>
<TextInput
ref='NoduleCountInput'
onFocus={() => this.onFocus()}
onBlur={() => this.onBlur()}
keyboardType='phone-pad'
returnKeyType='done'
placeholder='Test'
style={styles.field}
/>
<TextInput
ref='NoduleCountInput'
onFocus={() => this.onFocus()}
onBlur={() => this.onBlur()}
keyboardType='phone-pad'
returnKeyType='done'
placeholder='Test'
style={styles.field}
/>
<TextInput
ref='NoduleCountInput'
onFocus={() => this.onFocus()}
onBlur={() => this.onBlur()}
keyboardType='phone-pad'
returnKeyType='done'
placeholder='Test'
style={styles.field}
/>
<TextInput
ref='NoduleCountInput'
onFocus={() => this.onFocus()}
onBlur={() => this.onBlur()}
keyboardType='phone-pad'
returnKeyType='done'
placeholder='Test'
style={styles.field}
/>
</View>
</View>
</ScrollView>
</KeyboardAwareScrollView>
);
}
I tried the above solution for cross platform support but its not correct. The right and complete solution if you want the focus with automatic scrolling to TextInput to work is to set parameters as follows:
<KeyboardAwareScrollView
enableOnAndroid={true}
enableAutomaticScroll={(Platform.OS === 'ios')}
>
...
</KeyboardAwareScrollView>
This is because enableAutomaticScroll is enabled by default and it mixes up with the native Android behaviour to give unexpected results. So set this field to false when Platform is Android.
And yes also set the following in app.json
without which it will not work.
"androidStatusBar": {
"backgroundColor": "#000000"
}
这篇关于键盘识别滚动视图Android问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!