键盘感知滚动视图 Android 问题

Question

我使用Expo XDE（xde-2.19.3）创建了一个React Native项目，在屏幕上放置了一些。我使用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>
    );
  }

- arled

Answer 1

我尝试了上述解决方案以支持跨平台，但并不正确。如果你想让自动滚动到TextInput的焦点工作正常，正确且完整的解决方案是设置以下参数:

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

这是因为enableAutomaticScroll默认启用，并会与原生Android行为混合，导致产生意想不到的结果。所以，在平台为Android时，请将此字段设置为false。

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

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

- Karan Kamdar

---

是的，这就是我最终做的。所以由于某些奇怪的原因，你需要设置androidStatusBar。 - arled

是的，那个方法可行，但我不使用默认状态栏，这会使我的边距变得丑陋 :( - Rokas Devolskis

我正在使用react-native-keyboard-aware-scroll-view，并最近在Android上遇到了同样的问题。我通过禁用Android的自动滚动而不添加androidStatusBar更改来解决了这个问题。 - octobus

真的有点奇怪，我只是加了"androidStatusBar": { "backgroundColor": "#000000" }，它就开始正常工作了。透明或其他颜色都不起作用。 - Rohit Parte

Answer 2

我尝试了其他的解决方案，但它们对我没有用，最终我通过使用以下代码成功了：

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

- ignacio.suay

---

extraHeight可以起作用，但是当键盘打开时，会在页面底部留下额外的空间。有没有办法也处理这个问题？ - undefined

Answer 3

这是我修复它的方法:

在 app.json 中，我设置了:

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

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

- arled

---

这是唯一有效的方法。我尝试了几乎所有可能的解决方案，尽管backgroundColor和scroll之间没有任何关联。 - Rohit Parte

@RohitParte 这个问题很老了，我相信现在肯定有更好的解决办法了 :) - arled

Answer 4

对于 Expo 托管工作流：

1. 进入 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 >

- ken

Answer 5

对于我来说，我在安卓上（react-native 0.62.2）遇到了这个问题。iOS则完美运作。我发现 Android manifest 中的 adjustResize 标志是罪魁祸首。我将其删除后，它开始正常工作。

之前

android:windowSoftInputMode="stateAlwaysHidden|adjustPan|adjustResize"

之后

android:windowSoftInputMode="stateAlwaysHidden|adjustPan"

警告

我不知道它将来会带来什么副作用。

- maulikdhameliya

---

其他ReactNative库需要这个标志。 - monchisan

Answer 6

请转到AndroidManifest.xml并确保该属性。

--> android:windowSoftInputMode="adjustPan"

- Ameer Hamza

Answer 7

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

- Hrishikesh Baidya

---

您能否在回答中添加一些上下文，以及它是如何解决问题的？ - atymic

你可以将下面的代码替换为你自己的表单或其他组件，但是请确保使用主要组件： import KeyboardAwareScrollView from 'KeyboardAwareScrollView'; <KeyboardAwareScrollView enableOnAndroid={true} extraScrollHeight={90} >
<KeyboardAwareScrollView/> - Hrishikesh Baidya

Answer 8

使用

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

在你的清单文件中

- Milad Moosavi

---

这实际上根本没有解决问题。 实际上文档指出最好使用“adjustPan”。 - RowanX