键盘感知滚动视图 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 行为混淆，从而产生意想不到的结果。 因此，当平台为 Android 时，将此字段设置为 false。

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

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

Answer 2

这是我修复它的方式：

在app.json我设置：

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

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

Answer 3

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

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

Answer 4

对于 expo 托管工作流，

1. Go 到app.json添加：

   "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      },
      "softwareKeyboardLayoutMode": "pan" // add this line. 
    },

正如文档中提到的这一行：

首先，Android原生有这个功能，你可以通过在AndroidManifest.xml中设置windowSoftInputMode来轻松启用它

因此，为此，我们将其设置在app.json中，如此处所述

然后在组件中：

 <KeyboardAwareScrollView  
     extraScrollHeight={100} // (when scroll)to have extra height between keyboard and text input 
     enableOnAndroid={true}
     extraHeight={80} // make some height so the keyboard wont cover other component
     contentContainerStyle={{flexGrow: 1}} // make the scrollView full screen 
> 
   // other stuff
</KeyboardAwareScrollView >

Answer 5

 <KeyboardAwareScrollView
        enableOnAndroid={true}
        extraScrollHeight={90}
        >
       <Content>
        <View></View>
       </Content>
<KeyboardAwareScrollView/>

Answer 6

对我来说，我在 Android (react-native 0.62.2) 上遇到了这个问题。 iOS 运行良好。 我发现 Android 清单中的adjustResize标志是罪魁祸首。 我删除了它并开始工作

之前

android:windowSoftInputMode="stateAlwaysHidden|adjustPan|adjustResize"

之后

android:windowSoftInputMode="stateAlwaysHidden|adjustPan"

警告

不知道以后会有什么副作用。

Answer 7

使用

<activity android:windowSoftInputMode="adjustResize"></activity>

在你的Manifest