Rect Native (Gifted Chat) Reference.pu sh не удалось: первый аргумент содержит функцию в свойстве 'message.user.name - PullRequest
0 голосов
/ 08 апреля 2020

Я получаю эту ошибку (изображение внизу) в React Native при использовании одаренного чата. Не возникает проблем с компиляцией, проблемы возникают, когда я отправляю сообщение и не могу установить «response-native-gifted-chat» поскольку он показал некоторые другие ошибки, я использовал "@ echobind / реагировать-нативно-одаренный-чат", который совпадает с ошибкой реагирования-нативного-чата, пожалуйста, помогите мне найти, где проблема

The Code Is Given Down Below

Приложение. js:

import {createAppContainer} from "react-navigation";
import {createStackNavigator} from "react-navigation-stack";
import ChatScreen from './screens/ChatScreen';
import LoginScreen from './screens/LoginScreen';

const AppNavigator = createStackNavigator(
{
 Login: LoginScreen,
 Chat: ChatScreen
},
{
headerMode:"none"
}
)
export default createAppContainer(AppNavigator);

ChatScreen. js:

 import React from 'react';
 import {Platform,KeyboardAvoidingView,SafeAreaView} from "react-native";
 import {GiftedChat}  from '@echobind/react-native-gifted-chat'
 import Fire from "../Fire";


 export default class ChatScreen extends React.Component{
 state={
    messages:[]
 }
 get user(){
    return{
        _id:Fire.uid,
        name:this.props.navigation.state.params.name
    }
  }

  componentDidMount(){
    Fire.get(message => this.setState(previous=>({
        messages: GiftedChat.append(previous.messages,message)
    }))
    );
    }

    componentWillUnmount(){
    Fire.off()
    }

    render(){
    const chat= <GiftedChat messages={this.state.messages} onSend={Fire.send} user={this.user}/>;

    if (Platform.OS === "android"){
        return(
            <KeyboardAvoidingView style={{flex:1}} behavior="padding" keyboardVerticalOffset={30}   enabled>
                {chat}
            </KeyboardAvoidingView>
        );
        }
        return <SafeAreaView style={{flex:1}} > {chat} </SafeAreaView>;
       }
          }

Огонь. js:

 import firebase from 'firebase';

 class Fire {
constructor(){
    this.init()
    this.checkAuth()
}

init=()=>{
    if(!firebase.apps.length){
        firebase.initializeApp({
            ………...........
        });
    }
};
checkAuth=()=>{
    firebase.auth().onAuthStateChanged(user => {
        if (!user) {
            firebase.auth().signInAnonymously();
        }
    });
};

send=messages=>{
    messages.forEach(item =>{
        const message ={
            text:item.text,
            timestamp: firebase.database.ServerValue.TIMESTAMP,
            user: item.user
        }
        this.db.push(message);
    });
};

parse = message =>{
    const {user,text,timestamp} = message.val()
    const {key:_id} = message
    const createdAt=new Date(timestamp)

    return {
        _id,
        createdAt,
        text,
        user
    };
};

get = callBack => {
    this.db.on('child_added', snapshot => callBack(this.parse(snapshot)));
}

off(){
    this.db.off()
}

get db(){
    return firebase.database().ref("messages");
}

get uid(){
    return(firebase.auth().currentUser ||  {}).uid;
}
}
export default new Fire();

Экран входа в систему. js:

 import React from 'react';
 import {StyleSheet, View,Text,TouchableOpacity,Image,TextInput} from "react-native";

export default class ChatScreen extends React.Component{
state = {
    name: ""
}
continue = () =>{
    this.props.navigation.navigate("Chat",{name:this.state.name})
}
render(){
    return(
    <View style={styles.container}>
        <View style={styles.circle}/>
        <View style={{marginTop:64}}>
            <Image source={require("../assets/logo.png")} 
            style={{width:100 ,height:100,alignSelf:"center"}}/>
        </View>
        <View style={{marginHorizontal:32}}>
            <Text style={styles.header}>Username</Text>
            <TextInput style={styles.input} 
            placeholder="Belgin Android" 
            onChange={name =>{this.setState({name})
        }}
            value={this.state.name}
        />
        <View style={{alignItems:"flex-end",marginTop:32}}>
            <TouchableOpacity style={styles.continue} onPress={this.continue}>
                <Text> Hi </Text> 
            </TouchableOpacity>
        </View>
        </View>
    </View>
    );
}
}

const styles =StyleSheet.create({
container:{
    flex:1,
    backgroundColor:"#F4F5F7"
   },
   circle:{
    width:500,
    height: 500,
    borderRadius :500/2,
    backgroundColor:"#FFF",
    position:"absolute",
    left:-120,
    top:-20
},
header:{
    fontWeight:"800",
    fontSize:30,
    color: "#514E5A",
    marginTop:32
},
input:{
    marginTop: 32,
    height:50,
    borderWidth:StyleSheet.hairlineWidth,
    borderColor:"#BAB7C3",
    borderRadius:30,
    paddingHorizontal:16,
    color: "#514e5a",
    fontWeight:"600"
},
continue:{
    width:70,
    height:70,
    borderRadius:70/2,
    backgroundColor: "#9075E3",
    alignItems:"center",
    justifyContent:"center"
}

});
...