JSQMessagesViewController 在更新时更新气泡图像颜色

Question

我正在使用JSQMessagesViewController，并实现了三种气泡颜色。 额外的颜色旨在指示在仲裁聊天室中未批准的消息。

我正在运行 Firebase 后端，并在聊天消息条目更改时更新已批准的标志。

一切进展顺利，数据正在实时更改。 问题在于聊天气泡颜色，无论我做什么，它们都不会改变。

我尝试使布局无效，重新加载数据，直接访问单元格(只读(，除了离开聊天视图并返回之外，似乎没有任何改变颜色。

        messageRef.observe(.childChanged, with: { (snapshot) in
        let key = snapshot.key
        if let dict = snapshot.value as? [String: AnyObject] {
            let approved = (dict["approved"]?.boolValue ?? true)
            let indexOfMesage = self.messages.index(where:{$0.key == key})
            var message = self.messages[indexOfMesage!]
            message.approved = approved
            print(message)
            self.collectionView.performBatchUpdates({ () -> Void in
            self.collectionView.collectionViewLayout.invalidateLayout()                 
            self.collectionView.reloadData()
            }, completion:nil)
        }

任何帮助将不胜感激。上面的代码只是众多尝试之一。

---

在下面的回复后添加我的"messageBubbleImageDataForItemAt"呼叫以获取更多信息。

    override func collectionView(_ collectionView: JSQMessagesCollectionView!, messageBubbleImageDataForItemAt indexPath: IndexPath!) -> JSQMessageBubbleImageDataSource! {
    let message = messages[indexPath.item] // 1
    if message.messageItem.senderId == senderId { // 2
        if (message.approved == true){
            return outgoingBubbleImageView
        }else{
            return outgoingUnnaprovedBubbleImageView
        }
    }else if (self.superUsers.contains(message.messageItem.senderId)){
        return incomingAdminBubbleImageView
    }else { // 3
        if (message.approved == true){
            return incomingBubbleImageView
        }else{
            return incomingUnnapprovedBubbleImageView
        }
    }
}

Answer 1

使布局无效不会对气泡的颜色执行任何操作。我建议您修改消息数据对象，您所要做的就是符合JSQMessageData协议，并且我会为消息批准状态添加一个属性。

我将假设您定义了三个不同的消息气泡像这样的东西

var incomingBubble: JSQMessagesBubbleImage!
var outgoingBubble: JSQMessagesBubbleImage!
var approvedBubble: JSQMessagesBubbleImage!

然后在您的视图中确实加载了您实际上定义了它们。

incomingBubble = JSQMessagesBubbleImageFactory().incomingMessagesBubbleImage(with: UIColor.jsq_messageBubbleBlue())
outgoingBubble = JSQMessagesBubbleImageFactory().outgoingMessagesBubbleImage(with: UIColor.lightGray)
approvedBubble = JSQMessagesBubbleImageFactory().outgoingMessagesBubbleImage(with: UIColor.red)

然后在被覆盖的函数messageBubbleImageDataForItemAt中，您应该提供要使用的气泡的逻辑。

override func collectionView(_ collectionView: JSQMessagesCollectionView, messageBubbleImageDataForItemAt indexPath: IndexPath) -> JSQMessageBubbleImageDataSource {
    //Sent by the current user
    if messages[indexPath.item].senderId == self.senderId(){
       return outgoingBubble
    }
    //Check if the message is approved from that property earlier. 
    if messages[indexPath.item].approved {
       return approvedBubble
    }
    // its just a normal message return incoming message.
    return incomingBubble
}

其他明智的做法是，此时您需要从Firebase获取消息是否获得批准。

然后调用self.collectionView.reloadData()应该更新您的颜色，只要您从 Firebase 中提取了最新的颜色。

我希望这对你有所帮助。如果您还有其他问题，请告诉我并继续前进。🖖🏽