我有两个使用相同实时数据库的不同应用,
在第一个应用程序中,我发送的订单包含一些要保存在数据库中的数据字段,在另一个应用程序中,我仅添加了一个侦听器
firebase.database().ref(`userOrder/${currentUser}/orders`).Orders.on("value", (snapshot) => {});
检索数据库上的数据,并且无需任何刷新即可正常工作,因为它是Real-Time:D,所以我的问题是,当我从第一个应用程序发送数据时,我想显示通知在另一个应用程序中包含我发送的一些数据, 我正在使用Cloud Messaging,并从控制台Firebase及其工作发送一些测试消息,并收到很好的结果,因此如何在代码中进行处理
这是我的发送订单代码:
//import liraries
import React, { Component } from 'react';
import styles from "../Style/styles";
import firebase from "react-native-firebase";
import ImagePicker from "react-native-image-picker";
import { View, Text, TextInput, ScrollView, KeyboardAvoidingView, TouchableOpacity, Image } from 'react-native';
import DatePicker from 'react-native-datepicker'
// create a component
const currentdate = new Date();
const datetime =
currentdate.getFullYear() + "-" + (currentdate.getMonth() + 1) + "-" + currentdate.getDate() + " " +
currentdate.getHours() + ":" + currentdate.getMinutes()
class Order extends Component {
constructor(props) {
super(props);
this.state = {
userId: null,
datetime: datetime,
imageOfPrblem: '',
Incomplete: 'Incomplete',
providerId: this.props.navigation.getParam('providerId'),
providerName: this.props.navigation.getParam('providerName'),
providerService: this.props.navigation.getParam('providerService'),
}
this.initialState = { ...this.state }
}
componentDidMount() {
const userId = firebase.auth().currentUser.uid;
this.setState({ userId });
}
handleOrder = () => {
const { nameOfProblem, providerName, datetime, description, Price, userId, imageOfPrblem, providerId, providerService, Incomplete } = this.state;
const PushData = firebase.database().ref("request/" + providerId + "/" + userId + "/orders/");
let file = imageOfPrblem.uri;
const path = "Img_" + imageOfPrblem.fileName;
console.log("@IMAGE", path);
const ref = firebase.storage().ref("users/" + userId + "/UserImageOrders/" + path);
newOrderRef = PushData.push({
id: Math.floor(Math.random() * 10),
providerName: providerName,
statusInfo: Incomplete,
providerService: providerService,
nameOfProblem: nameOfProblem,
description: description,
Price: Price,
datetime: datetime
});
if (file) {
let keyG = newOrderRef.key; // Key Generated with .push()
PushData.child(keyG).update({
id: Math.floor(Math.random() * 10),
providerName: providerName,
datetime: datetime,
providerService: providerService,
nameOfProblem: nameOfProblem,
description: description,
Price: Price,
imageOfPrblem: imageOfPrblem
})
ref.put(file).then(() => {
this.setState(this.initialState);
alert("Order Sent with Image.")
this.props.navigation.navigate("Home");
});
} else {
newOrderRef.then(() => {
this.setState(this.initialState);
alert("Order Sent.")
setTimeout(() => {
this.props.navigation.navigate("Home");
}, 1500);
});
}
}
handleOrderForUser = () => {
const { nameOfProblem, datetime, description, Price, userId, imageOfPrblem, providerService, providerName, Incomplete } = this.state;
const PushData = firebase.database().ref("userOrder/" + userId + "/orders/");
let file = imageOfPrblem.uri;
const path = "Img_" + imageOfPrblem.fileName;
console.log("@IMAGE", path);
const ref = firebase.storage().ref("users/" + userId + "/UserImageOrders/" + path);
newOrderRef = PushData.push({
id: Math.floor(Math.random() * 10),
providerName: providerName,
statusInfo: Incomplete,
providerService: providerService,
nameOfProblem: nameOfProblem,
description: description,
Price: Price,
datetime: datetime
});
if (file) {
let keyG = newOrderRef.key; // Key Generated with .push()
PushData.child(keyG).update({
id: Math.floor(Math.random() * 10),
providerName: providerName,
datetime: datetime,
providerService: providerService,
nameOfProblem: nameOfProblem,
description: description,
Price: Price,
imageOfPrblem: imageOfPrblem
})
ref.put(file).then(() => {
this.setState(this.initialState);
this.props.navigation.navigate("Home");
});
} else {
newOrderRef.then(() => {
this.setState(this.initialState);
setTimeout(() => {
this.props.navigation.navigate("Home");
}, 1500);
});
}
}
handleImages = () => {
const options = {
title: "Select Images!",
storageOptions: {
skipBackup: true,
path: "images"
}
};
ImagePicker.showImagePicker(options, response => {
if (response.uri) {
this.setState({ imageOfPrblem: response });
}
if (response.didCancel) {
console.log("User cancelled image picker");
} else if (response.error) {
console.log("ImagePicker Error: ", response.error);
} else if (response.customButton) {
console.log("User tapped custom button: ", response.customButton);
alert(response.customButton);
}
});
};
render() {
const { nameOfProblem, description, imageOfPrblem, providerId, datetime, providerName, Price } = this.state;
// const { getParam } = this.props.navigation.dangerouslyGetParent();
// const providerId = getParam('providerId');
// const providerName = getParam('providerName');
return (
<ScrollView scrollEnabled={true}>
<KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={70}>
<View style={[styles.container, { marginTop: 20 }]}>
<Text>Send Order To: {JSON.stringify(providerName)}, ID:{JSON.stringify(providerId)}</Text>
<TextInput
style={styles.textInput}
placeholder="Name of Problem"
value={nameOfProblem}
onChangeText={(nameOfProblem) => this.setState({ nameOfProblem })}
returnKeyType="next"
returnKeyLabel="next"
/>
<TextInput
style={styles.textInput}
placeholder="Price"
keyboardType="numeric"
value={Price}
onChangeText={(Price) => this.setState({ Price })}
returnKeyType="next"
returnKeyLabel="next"
/>
<DatePicker
style={{ width: 200 }}
date={datetime}
mode="datetime"
placeholder="select date"
format="YYYY-MM-DD H:mm a"
minDate="2019-02-01"
maxDate="2023-1-1"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
customStyles={{
dateIcon: {
position: 'absolute',
left: 0,
top: 4,
marginLeft: 0
},
dateInput: {
marginLeft: 36
}
}}
onDateChange={datetime => this.setState({ datetime })}
/>
<TextInput
style={[styles.textInput, {
borderRadius: 5,
borderWidth: 1,
height: 120,
fontSize: 16,
padding: 10,
marginTop: 8
}]}
placeholder="Description"
multiline={true}
numberOfLines={12}
textAlignVertical="top"
value={description}
onChangeText={(description) => this.setState({ description })}
returnKeyType="next"
returnKeyLabel="next"
/>
<TouchableOpacity onPress={this.handleImages}>
<View
style={{
backgroundColor: "#DBDBDB",
borderRadius: 100,
alignSelf: "center",
margin: 10,
paddingBottom: 2,
width: 120,
height: 120
}}
>
<Text
style={{
position: "absolute",
zIndex: 1,
fontSize: 40,
top: 67,
color: "#1567d3",
left: 99
}}
>
+
</Text>
<Image
source={{ uri: imageOfPrblem.uri }}
style={[styles.uploadAvatar, { borderRadius: 100 }]}
resizeMode="cover"
/>
</View>
</TouchableOpacity>
<TouchableOpacity
style={[styles.button, { backgroundColor: "#1567d3" }]}
onPress={() => { this.handleOrder(); this.handleOrderForUser(); }}
>
<Text style={{ color: "#fff", fontSize: 18 }}>Send</Text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
</ScrollView>
);
}
}
export default Order;