错误 Cloud Firestore addEventListener is not a function #react-native #firestore

Question

我在使用 cloud firestore 时遇到问题和错误当我输入 var db = firebaseApp.firestore () 时出现该错误

描述错误的图像

import React, { Component } from 'react'
import { StyleSheet, View, Dimensions, Image, Text, SafeAreaView, 
ScrollView, FlatList, Modal, TextInput, TouchableOpacity } from 'react- 
native';
import { firebaseAppKeep } from '../../constant/configFireBase'


import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'


import TaskList from '../../components/TaskList'
import TaskForm from '../../components/TaskForm'
import HeaderBar from '../../components/HeaderBar'

const WIDTH = Dimensions.get('window').width
const HEIGHT = Dimensions.get('window').height
const sizeIconAdd = 60

export default class TaskHome extends Component {
  constructor(props) {
super(props);
this.state = {
  statusModal: false,
  taskList: []
}
      }
  OpenModalTaskControl = () => {
    this.setState({
      statusModal: !this.state.statusModal
    })
  }
  getDayCreated = () => {
var date = new Date().getDate(); //Current Date
var month = new Date().getMonth() + 1; //Current Month
var year = new Date().getFullYear(); //Current Year
date = date + '/' + month + '/' + year
return date
  }
  getTimeCreate = () => {
var hours = new Date().getHours(); //Current Hours
var min = new Date().getMinutes(); //Current Minutes
var sec = new Date().getSeconds(); //Current Seconds
hours = hours + ':' + min + ':' + sec
return hours
  }
      s4() {
    return Math.floor((1 + Math.random()) *     0x10000).toString(16).substring(1)
  }
  genarateID() {
    return this.s4() + this.s4() + '-' + this.s4() + this.s4() + '-' +             this.s4() + this.s4() + '-' + this.s4() + this.s4();
  }

  addTask = (task) => {
task.id = this.genarateID()
task.dayCreated = this.getDayCreated()
task.timeCreated = this.getTimeCreate()
console.log(task)

var user = firebaseAppKeep.auth().currentUser
var db = firebaseAppKeep.firestore()
if (user) {
  console.log(user.email, user.uid)
  db.collection(user.uid)
    .add({
      colorTask: task.colorTask,
      dayCreated: task.dayCreated,
      id: task.id,
      status: task.status,
      taskDetail: task.taskDetail,
      timeCreated: task.timeCreated,
      titleTask: task.titleTask
    })
    }
    this.state.taskList.push(task)
      }
  SignOut = () => {
    firebaseAppKeep.auth().signOut()
  .then(() => {
    this.props.navigation.navigate('AuthRoutes')
  })
  .catch(error => console.log(error));
  }
  render() {
    var { statusModal } = this.state
    var showBtnAddTask = statusModal === false ?
      <View style={{ position: 'absolute', left: WIDTH - sizeIconAdd - 10, vtop: HEIGHT - sizeIconAdd - 20 }}>
    <TouchableOpacity onPress={() => this.OpenModalTaskControl()}>
      <FontAwesome5 name={"plus"} size={sizeIconAdd} color={"black"} />
    </TouchableOpacity>
  </View>
  : null
return (
  <SafeAreaView>
    <HeaderBar opacity={this.state.statusModal} signout={this.SignOut} />

    <View style={{ marginHorizontal: 10, alignItems: 'center', opacity: this.state.statusModal === true ? 0.1 : 1 }}>
      <TaskList taskList={this.state.taskList} />
    </View>

    <TaskForm
      statusModal={this.state.statusModal}
      changeStatusModal={this.OpenModalTaskControl}
      addTask={this.addTask}
    />
    {showBtnAddTask}
  </SafeAreaView>
);
}
}

错误 { TypeError:e.addEventListener 不是 function。 （在'e.addEventListener("visibilitychange",this.ah)'中，'e.addEventListener'未定义）}

希望能对你有所帮助

Answer 1

我正在使用 Expo。 我通过运行expo install firebase来修复它。 它安装了 7.9.0 版，现在警告消失了。

Answer 2

这是由于 firebase firebase-js在 window 上使用了事件侦听器，这在 RN 中不存在。 通过在应用程序的顶层插入这一行来模拟它。

window.addEventListener = x => x;

Answer 3

有同样的问题。 我让它工作的唯一方法是放到"firebase": "^6.6.2"

Answer 4

我通过执行以下步骤找到了解决方案： 1. 在版本 7.14.0 中重新安装了 Firebase 2. 我安装了 base-64 3. 将以下代码添加到我的 app.js

 import {decode, encode} from 'base-64'

 if (! global.btoa) {global.btoa = encode}

 if (! global.atob) {global.atob = decode}

它奏效了，但对我来说仍然像是一些警告。

请编辑问题标签，为 firebase 团队添加 firebase 和 firebase-firestore 以查看问题。

Answer 5

经过多次尝试，当我添加此行时它可以工作：

window.addEventListener = (x) => x;

firebase进口申报前，同理：

firebase.js

window.addEventListener = (x) => x;

import * as firebase from "firebase";

const firebaseConfig = {
apiKey: "myAPIkEy",
authDomain: "myapp.firebaseapp.com",
databaseURL: "https://myapp.firebaseio.com",
projectId: "myapp",
storageBucket: "myapp.appspot.com",
messagingSenderId: "00000000",
appId: "1:000000000:web:0000000000459",
measurementId: "G-TOOOOOOOO",
};

firebase.initializeApp(firebaseConfig);