使用layoutanimation为新消息动画的天赋

发布于 2025-01-25 02:10:51 字数 1208 浏览 3 评论 0原文

我一直在尝试实施一些动画,以通过GiftedChat发送消息,但这给了我很大的问题。

除了此线程外,似乎无法在此上找到任何资源: https://github.com/github.com/faridsafi/faridsafi/faridsafi/reaect-native-native-native-gift--native-gith--gift--native-gifted-gifted--gifted--gifted--gin-聊天/问题/592

目标是让许多其他聊天应用程序(例如Facebook Messenger和WhatsApp)所展示的新消息滑入聊天中。

我当前的实现使用了LayoutAnimation,但我不确定将其放在哪里以确保它没有错误。

当我将“ layoutanimation.configurenext(config)”放在我的使用效果下以何时更新时,它似乎可以在iOS上使用,但是在Android上,它在聊天中留下了空白,并弄乱了布局。 android上的空白

所以我的解决方案是将其放在onsend下,以便动画只能在时才播放。发送一条消息,但这也会在我的代码中被错误,因为我在键入消息时隐藏了“ ininputtextchanged”设置,以隐藏左动作,并且动画播放用于隐藏左动作而不是新消息。

这是我的代码:

<GiftedChat
 ...
 onInputTextChanged={text => {text != ‘’ ? this.setState({hideActionButtons: true}) : 
                      this.setState({hideActionButtons: false})}}
 onSend={messages => {
   this._onSend({ type: MESSAGES, messages })
   LayoutAnimation.configureNext(config)
 }}
 ...
/>

感谢任何建议,谢谢。

I've been trying to implement some animation for sending messages through GiftedChat but it's giving me quite abit of issues.

Can't seem to find any resources on this except for this thread:
https://github.com/FaridSafi/react-native-gifted-chat/issues/592

The goal is to have the new messages slide into the chat demonstrated by a lot of other chat apps such as facebook messenger and whatsapp.

My current implementation uses layoutAnimation but I'm not sure where to put it to ensure that it's bug free.

When I put "LayoutAnimation.configureNext(config)" under my useEffect for when the messages update, it seems to work on on ios but on android, it leaves a blank space in the chat and messes up the layout.
blank space on android

So my solution was to put it under onSend so that the animation only plays when sending a message, but this is also bugged in my code because I have "onInputTextChanged" setup under GiftedChat to hide the left actions when typing a message and the animation plays for hiding the left actions instead of new messages.

Here's my code:

<GiftedChat
 ...
 onInputTextChanged={text => {text != ‘’ ? this.setState({hideActionButtons: true}) : 
                      this.setState({hideActionButtons: false})}}
 onSend={messages => {
   this._onSend({ type: MESSAGES, messages })
   LayoutAnimation.configureNext(config)
 }}
 ...
/>

Any suggestion is appreciated, thanks.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文