如何在React Native中使用相同的Firebase数据库在两个Apps之间进行通信?

时间:2019-05-15 00:32:53

标签: javascript reactjs firebase react-native firebase-cloud-messaging

我有两个使用相同实时数据库的不同应用,

在第一个应用程序中,我发送的订单包含一些要保存在数据库中的数据字段,在另一个应用程序中,我仅添加了一个侦听器

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;

0 个答案:

没有答案