键盘感知滚动视图Android问题

Question

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

查看了KeyboardAwareScrollView 文档，看到我需要配置AndroidManifest.xml，但似乎世博会已经解决了这个问题：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"
}

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

Answer 4

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

Answer 5

对于展会管理的工作流程，

1. 去app.json添加这个：

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

正如文档中提到的那样：

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

为此，我们将其设置在 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 >

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