键盘感知滚动视图Android问题 [英] Keyboard aware scroll view Android issue

问题描述

我使用 Expo XDE (xde-2.19.3) 创建了一个 react native 项目，屏幕上有一些 TextInputs.我使用 KeyboardAwareScrollView 将输入从键盘下方滚动到视图中，并且在 iOS 上工作正常，但在 Android 上不起作用.希望这是有道理的.

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.

查看了 KeyboardAwareScrollView 文档，发现我需要配置 AndroidManifest.xml 但似乎 Expo 已经解决了这个问题:https://github.com/expo/expo/blob/master/template-files/android/AndroidManifest.xml

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

但是我仍然无法在 Android 上使用它...

However I'm still not able to get this working on Android...

我可能会错过什么?

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

推荐答案

我尝试了上述跨平台支持的解决方案，但它不正确.如果您希望自动滚动到 TextInput 的焦点起作用，正确且完整的解决方案是设置参数如下:

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>

这是因为 enableAutomaticScroll 是默认启用的，它与原生 Android 行为混在一起会产生意想不到的结果.所以当Platform为Android时，将此字段设置为false.

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.

是的，还可以在 app.json 中设置以下内容，否则它将无法工作.

And yes also set the following in app.json without which it will not work.

"androidStatusBar": {
  "backgroundColor": "#000000"
}

这篇关于键盘感知滚动视图Android问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！