在反应原生天才聊天中从 firebase firestore 获取图像

问题描述

这是我在群聊中的消息代码。我正在使用 React Native 天才聊天。我正在尝试从 firebase firestore 中的用户配置文件文档中获取图像，我正在尝试将其设置为聊天中用户头像的图像。但什么也没发生。

我到底哪里出错了？因为现在对于用户头像，它显示为每个人姓名的第一个字母，我如何在其中获取我的图像？

谢谢！

   'use strict'
    import React,{ Component } from 'react';
    import {
      StatusBar,View
    } from 'react-native';
    import { GiftedChat,Bubble } from 'react-native-gifted-chat';
    import firebaseApp from './firebaseConfig.js';
    import styles from './styles.js';
    
    
    class Messages extends Component {
      static navigationOptions = ({ navigation }) => ({
        title: navigation.state.params.roomName,headerStyle: styles.messagesHeader,headerTitleStyle: styles.messagesTitle,headerBackTitleStyle: styles.messagesBackTitle
      });
    
     
      
    
      constructor(props) {
        super(props);
        var FirebaseDB = firebaseApp.database();
        var roomKey = this.props.navigation.state.params.roomKey;
        this.messagesRef = FirebaseDB.ref(`messages/${roomKey}`);
        this.state = {
          user: '',messages: [],image : ''
        }
      }
    
      async componentDidMount() {
        this.setState({ user: firebaseApp.auth().currentUser });
        this.listenForMessages(this.messagesRef);
        const currentUserUID = firebaseApp.auth().currentUser.uid;
        let doc =  await firebaseApp
        .firestore()
        .collection('userProfile')
        .doc(currentUserUID)
        .get();
    
        const dataObj = doc.data();
        //this.setState({image: })
    
        this.setState({ image: dataObj.image}); // CALLING IMAGE FROM DATABASE
    
      }
    
      listenForMessages(messagesRef) {
        messagesRef.on('value',(dataSnapshot) => {
          var messagesFB = [];
          dataSnapshot.forEach((child) => {
            messagesFB = [({
              _id: child.key,text: child.val().text,createdAt: child.val().createdAt,user: {
                _id: child.val().user._id,name: child.val().user.name
              }
            }),...messagesFB];
          });
          this.setState({ messages: messagesFB });
        });
      }
    
      addMessage(message = {}) {
        var message = message[0]
        this.messagesRef.push({
          text: message.text,createdAt: Date.now(),user: {
            _id: message.user._id,name: message.user.name,avatar: message.user.image
          }
        })
      }
    
      render() {
        return (
          <View style={{flex: 1}}>
            <StatusBar barStyle="light-content"/>
            <GiftedChat
              renderUsernameOnMessage={true}
              messages={this.state.messages}
              onSend={this.addMessage.bind(this)}
              user={{
                _id: this.state.user.uid,name: this.state.user.email,avatar: this.state.user.image
              }}
              renderBubble={props => {
                return (
                  <Bubble
                    {...props}
                    textStyle={{
                      right: { color: 'black' },left: {color: 'black'}
                    }}
                    wrapperStyle={{
                      left: { backgroundColor: '#feca67'},right: { backgroundColor: '#75cbcf'},}}
                  />
                );
              }}
            />
          </View>
        );
      }
    }
    
    export default Messages;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）