键盘感知滚动视图 Android 问题

Question

我使用 Expo XDE (xde-2.19.3) 创建了一个 React Native 项目，屏幕上有一些 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

使用

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

在你的Manifest

Answer 2

我是这样修复的：

在app.json我设置：

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

这解决了问题，我不知道如何解决，但它确实解决了。所以我会把它留在这里以防其他人觉得它有用。

Answer 3

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

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

这是因为默认情况下启用 enableAutomaticScroll，它与本机 Android 行为混合在一起会产生意外结果。因此当 Platform 为 Android.

时将此字段设置为 false

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

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

Answer 4

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

 <KeyboardAwareScrollView enableOnAndroid={true} extraHeight={130} extraScrollHeight={130}>
  ...
</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

对于 expo 管理的工作流程，

转到 app.json 添加：

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

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

First, Android natively has this feature, you can easily enable it by setting windowSoftInputMode in AndroidManifest.xml

因此，我们将其设置为 app.json ，如 here

所述

然后在组件中：

 <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 >

键盘感知滚动视图 Android 问题

Keyboard aware scroll view Android issue

android

react-native

expo