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