当我按下输入框时,键盘就会出现,但却没有与聊天组件的其他部分锚定在一起,因为盒子以不同的速度或作为独立的组件移动,有时输入框会被甩在后面,然后最终追上,而不像在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