键盘感知滚动视图Android问题

Posted 2023-04-18

【中文标题】键盘感知滚动视图Android问题

【英文标题】：Keyboard aware scroll view Android issue

【发布时间】：2018-01-09 23:39:00

【问题描述】：

我使用 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>
    );
  

【参考方案1】：

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

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

这是因为 enableAutomaticScroll 在默认情况下是启用的，它会与原生 Android 行为相混淆，从而产生意想不到的结果。所以当Platform为Android时，将此字段设置为false。

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

"androidStatusBar": 
  "backgroundColor": "#000000"

【讨论】：

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

是的，但我不使用默认状态栏，所以它让我的边距很难看:(

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

【参考方案2】：

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

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

【参考方案3】：

这就是我修复它的方法：

在app.json我设置：

"androidStatusBar": 
  "backgroundColor": "#000000"

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

【参考方案4】：

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

【讨论】：

你能在你的答案周围添加一些上下文，以及它是如何解决问题的吗？

在内容的地方，你可以替换你的表单或任何你想要的东西，只需用主要组件覆盖那些代码，即从'KeyboardAwareScrollView'导入KeyboardAwareScrollView;

【参考方案5】：

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

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

【参考方案6】：

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

之前

android:windowSoftInputMode="stateAlwaysHidden|adjustPan|adjustResize"

之后

android:windowSoftInputMode="stateAlwaysHidden|adjustPan"

警告

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

【讨论】：

其他 ReactNative 库需要这个标志

【参考方案7】：

使用

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

在你的Manifest

【讨论】：

这其实根本解决不了问题。实际上，文档说最好使用“adjustPan”