React Native：键盘在调整其视图高度时阻止多行文本输入

Posted 2023-04-18

【中文标题】React Native：键盘在调整其视图高度时阻止多行文本输入

【英文标题】：React Native: Keyboard blocks multiline textInput when adjusting its view's height

【发布时间】：2018-02-16 19:06:01

【问题描述】：

一段时间以来，我一直在尝试使用多行进行不断增长的文本输入，现在我发现我的应用程序在输入文本输入新行时键盘会阻止文本。我已经尝试过各种解决方案，从基于 KeyboardAwareScrollView 的解决方案到 ScrollView 解决方案，但是我尝试过的所有解决方案都没有奏效。

如果有人能为我提供适用于 android 和 ios 的解决方案，我将不胜感激。

我现在拥有的是一个带有多行属性的文本输入视图

<View style= height: this.state.height, flex: 1 >
  <TextInput
    ...otherProps
    placeholder="Skriv här"
    placeholderTextColor="rgba(0,0,0,0.3)"
    blurOnSubmit=false
    multiline
    onContentSizeChange=this._onContentSizeChange
    style=[styles.textInputStyle,  height: this.state.height ]
  />
</View>

用_onContentSizeChange函数如下：

_onContentSizeChange = (event): void => 
  const height = event.nativeEvent.contentSize.height;
  this.setState( height );

用图片说明问题： imgur album

【参考方案1】：

KeyboardAvoidingView 似乎是您的解决方案。您可以设置视图和键盘之间的距离，并使用输入的高度进行计算。在文档中，您可以找到所有属性：https://facebook.github.io/react-native/docs/keyboardavoidingview.html

您也可以尝试使用 KeyboardAvoidingScrollView，然后当您的输入足够高时，您只需向下滚动屏幕。

这是一篇很棒的文章，其中包含很好的键盘避免示例：https://medium.freecodecamp.org/how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up-7442c1535580

希望对你有帮助。