【问题标题】:How to disable the keyboardAvoidingView behaviour in TextInput如何在 TextInput 中禁用 keyboardAvoidingView 行为
【发布时间】:2020-10-04 08:19:05
【问题描述】:

我正在开发一个使用 react native cli 制作的 react native 项目。问题是当键盘可见/活动时 TextInput 会突出显示,它会挤压视图并弄乱布局,这让我想起了 KeyboardAvoidingView 行为。尽管我在这个项目中没有使用KeyboardAvoidingView,因为所有文本输入都在屏幕的上半部分,所以它们不会被键盘覆盖。

<TextInput
      style={styles.inputText}
      multiline={false}
      onSubmitEditing={() => Keyboard.dismiss()}
      autoCapitalize="none"
      autoCorrect={false}
      keyboardType="number-pad"
      onChangeText={numberInputHandler}
      value={enteredValue}/>

 inputText: {
      borderBottomColor: "white",
      borderBottomWidth: 2,
      width: "30%",
      position: "absolute",
      bottom: Dimensions.get("window").height / 5,
      left: Dimensions.get("window").width / 5,
      color: "white",
      fontSize: Dimensions.get("window").height * 0.03,
      fontFamily: "Lato-Regular"
      }

React Native 版本 0.61.5

测试是在 Android 模拟器和 Android 物理设备上完成的

【问题讨论】:

  • 只需将 android:windowSoftInputMode="stateHidden|stateVisible|adjustPan" 添加到您希望键盘不改变任何行为的活动中的 ManifistFile 中

标签: android react-native


【解决方案1】:

我可以看到您使用绝对定位,底部使用 Dimension api 来获取高度。问题由此发生。尝试提供静态高度,而不是从 Dimension 获取,因为当键盘出现时可见窗口缩小会导致响应重新渲染,因为高度发生变化。

position: "absolute",
bottom: Dimensions.get("window").height / 5,

【讨论】:

  • 在我将位置更改为相对位置并注释底部和左侧后出现相同的行为,出现的键盘总是试图挤压视图并向上移动页脚而不是隐藏它,相同的代码在管理的博览会中表现正常项目但在非博览会反应本机中以这种方式表现(当我从我的初始博览会项目复制代码并替换博览会模块时出现此问题
【解决方案2】:

Nikosssgr 提供的解决方案:

在 AndroidManifest.xml 中

android:windowSoftInputMode="adjustResize" 改成 "adjustNothing"

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-09-01
    • 2021-06-13
    • 2017-12-30
    • 1970-01-01
    • 2020-08-10
    • 2017-12-31
    相关资源
    最近更新 更多