键盘识别滚动视图Android问题

Question

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

看了一下这些KeyboardAwareScrollView文档并发现我需要进行配置,AndroidManifest.xml但看来Expo已经对此进行了整理:https://github.com/expo/expo/blob/master/template-files/android/AndroidManifest.xml

但是我仍然无法在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>
    );
  }

Answer 1

我尝试了上面的解决方案来支持跨平台,但它不正确.如果您希望通过自动滚动到TextInput工作的焦点,那么正确而完整的解决方案是设置参数,如下所示:

<KeyboardAwareScrollView
  enableOnAndroid={true}
  enableAutomaticScroll={(Platform.OS === 'ios')}
>
...
</KeyboardAwareScrollView>

这是因为默认情况下启用了enableAutomaticScroll,它与原生Android行为混合在一起会产生意外结果.因此,当Platform是Android时,请将此字段设置为false.

是的还设置了以下内容,app.json没有它将无法正常工作.

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

Answer 2

我尝试了其他解决方案，但这些解决方案对我不起作用，但是最后我设法使用以下代码使其起作用：

 <KeyboardAwareScrollView enableOnAndroid={true} extraHeight={130} extraScrollHeight={130}>
  ...
</KeyboardAwareScrollView>

Answer 3

这是我解决的方法：

在app.json我设定：

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

这解决了这个问题，我不知道如何，但是确实做到了。因此，将其保留在这里，以防其他人发现它有用。