Question

我一直在尝试使用多行来增加textinput一段时间，并且现在在键盘在文本输入上输入新行时阻止文本的情况下找到我的应用程序。我尝试过各种解决方案，从基于KeyboardAwareScrollView的解决方案到ScrollView解决方案，但是我尝试过的任何工作都没有。

如果有人能为我提供适用于Android和iOS的解决方案，我将非常感激。

我现在拥有的是带有多行道具的textinput的视图

<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

Answer 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

希望它有所帮助。

React Native：键盘在调整视图高度时阻止多行textInput

1 个答案: