如何在聊天应用中显示发件人的用户名？

我正在为UI和后端使用react-native-gifted-chat，我正在使用AWSAppSync / GraphQL来存储用户数据。我不确定如何在我的ChatApp中显示发件人的用户名，是否需要此功能才能进行群聊。到目前为止，这是我的代码。

import React from 'react'
import { giftedChat } from 'react-native-gifted-chat'
class ChatScreen extends React.Component {
state = {
messages: [],username: ''
}
componentWillMount() {
this.setState({
messages: [
{
_id: 1,text: 'Hello developer',createdAt: new Date(),user: {
_id: 0,name: 'Default',avatar: 'https://placeimg.com/140/140/any',},],})
}
onSend(messages = []) {
this.setState(previousState => ({
messages: giftedChat.append(previousState.messages,messages),}))
}
render() {
return (
messages={this.state.messages}
renderusernameOnmessage={true}
OnSend={messages => this.onSend(messages)}
user={this.username}
/>
)
}
}
export default ChatScreen;


在进行响应时，本地自然聊天user必须是包含键_id，name和avatar的对象。 _id将帮助它分离发送者和接收者。因此，是的，您必须使用这些属性设置用户。它不只允许username。

最简单的方法是先从服务器获取当前用户信息，然后将其存储到asyncStorage的redux中。例如，我正在从firebase获取当前用户，如下所示：

export const getAccountInfo = () => {
return async dispatch => {
const cu = auth().currentUser;
const user = await firestore().collection('users').doc(cu.uid).get();
dispatch({
type: Types.INFO_FETCHED,data: user.data()
});
};
};


现在，在我的聊天屏幕中，我将用户设置如下：

...
...
user={{
_id: this.props.account?.user?.uid,name: this.props.account?.data?.fullName,avatar: this.props.account?.data?.avatar
}}
/>

,

您尝试过吗？

WFDB.dll!WFDB.Contexts.TransactionRepeater.Trans_StateChanged(object sender,Devart.Common.TransactionStateChangedEventArgs e) Line 249 C#
Devart.Data.dll!Devart.Common.DbTransactionBase.OnStateChanged(Devart.Common.TransactionAction action,System.Data.Common.DbConnection connection) Unknown
Devart.Data.PostgreSql.dll!Devart.Data.PostgreSql.PgSqlTransaction.Commit() Unknown
Devart.Data.PostgreSql.Entity.EFCore.dll!Devart.Common.Entity.cx.Commit() Unknown
Microsoft.EntityFrameworkCore.Relational.dll!Microsoft.EntityFrameworkCore.Storage.RelationalTransaction.Commit() Unknown (The culprit? How do I stop this call?)
Microsoft.EntityFrameworkCore.Relational.dll!Microsoft.EntityFrameworkCore.Update.Internal.BatchExecutor.Execute(Microsoft.EntityFrameworkCore.DbContext _,(System.Collections.Generic.IEnumerable,Microsoft.EntityFrameworkCore.Storage.IRelationalConnection) parameters) Unknown
Microsoft.EntityFrameworkCore.dll!Microsoft.EntityFrameworkCore.Storage.Internal.NoopExecutionStrategy.Execute,int>((System.__Canon,System.__Canon) state,System.Func operation,Microsoft.EntityFrameworkCore.Storage.ExecutionResult> verifySucceeded) Unknown
Microsoft.EntityFrameworkCore.Relational.dll!Microsoft.EntityFrameworkCore.Update.Internal.BatchExecutor.Execute(System.Collections.Generic.IEnumerable commandBatches,Microsoft.EntityFrameworkCore.Storage.IRelationalConnection connection) Unknown
Microsoft.EntityFrameworkCore.Relational.dll!Microsoft.EntityFrameworkCore.Storage.RelationalDatabase.SaveChanges(System.Collections.Generic.IList entries) Unknown
Microsoft.EntityFrameworkCore.dll!Microsoft.EntityFrameworkCore.ChangeTracking.Internal.StateManager.SaveChanges(System.Collections.Generic.IList entriesToSave) Unknown
Microsoft.EntityFrameworkCore.dll!Microsoft.EntityFrameworkCore.ChangeTracking.Internal.StateManager.SaveChanges(bool acceptAllChangesOnSuccess) Unknown
Microsoft.EntityFrameworkCore.dll!Microsoft.EntityFrameworkCore.DbContext.SaveChanges(bool acceptAllChangesOnSuccess) Unknown
Microsoft.EntityFrameworkCore.dll!Microsoft.EntityFrameworkCore.DbContext.SaveChanges() Unknown
WFDB.dll!WFDB.Contexts.Workflow_DBContext.SaveChanges() Line 107 C#