如何在Messenger中那样输入键盘行为与react-native-gifted-chat的关系

267 阅读1分钟

当我按下输入框时,键盘就会出现,但却没有与聊天组件的其他部分锚定在一起,因为盒子以不同的速度或作为独立的组件移动,有时输入框会被甩在后面,然后最终追上,而不像在Messager上,盒子里的信息、输入框和键盘一起移动,并以相同的速度相互捆绑,没有一个留在后面。

我试着去掉isKeyboardInternallyHandled道具,把输入框包在一个KeyboardAvoidingView周围,但是平滑的动画被去掉了,这个问题也持续存在。我还尝试在真实设备上进行本地服务,以及建立应用程序并在ios的testflight中进行测试,但也出现了这个问题。

我在下面附上了2个youtube链接或大约10秒的预览短片,说明我遇到的问题以及我想实现的目标。请帮助我解决这个问题。

遇到 -->点击 youtube.com/shorts/A2gu…

我想存档的内容 -->点击 youtube.com/shorts/VJf6…

代码摘录

 return (
<>
  <Screen style={styles.container}>
    <Header dating={isDatingChat} account={userData} />
    <GiftedChat
      listViewProps={{
        style: {
          backgroundColor: colors.dark_opacity,
        },
      }}
      scrollToBottom
      renderAvatar={renderAvatar}
      text={textMessage}
      onInputTextChanged={(text) => onInputTextChanged(text)}
      renderUsernameOnMessage
      lightboxProps={{ useNativeDriver: true }}
      messages={messages_processed}
      onSend={(messages) => onSend(messages)}
      user={{
        _id: chat_acc_id,
      }}
      alwaysShowSend
      renderBubble={this.renderBubble}
      renderInputToolbar={renderInputToolbar}
      renderSend={renderSend}

    {Platform.OS === "android" && (
      <KeyboardAvoidingView behavior="padding" />
    )}
  </Screen>
</>

);

要重现

按下输入框,显示键盘

预期的结果

键盘在打开时应顺利地将聊天内容推上去,并像在Messager和其他消息应用程序上一样,在与聊天输入框固定在一起时正确移动。

其他信息

Expo: ~44.0.0
Nodejs version: 14.20.0
React version: 17.0.1
React Native version: 0.64.3
react-native-gifted-chat version: ^0.16.3
Platform(s) (iOS, Android, or both?): Both