尝试将firebase添加到我的React Native应用程序时出错(您尝试使用未安装的firebase模块)

问题描述 投票:1回答:1

我正在尝试在我的应用中使用Firebase,但是它给了我这个错误:

    Error: You attempted to use a firebase module that's not installed on you Android project by calling firebase.app()

    Ensure you have: 

    1) Imported the io.invertase.firebase.app.ReactNativeFirebaseAppPackage module in your MainApplication.java file

    2) Added the new ReactNativeFirebaseAppPackage() line inside of RN 'getPackages()' method list.

所以这是我的MainApplication.java文件:

package com.myApp;

import android.app.Application;
import android.content.Context;
import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.soloader.SoLoader;
import java.lang.reflect.InvocationTargetException;
import java.util.List;
import io.invertase.firebase.app.ReactNativeFirebaseAppPackage;
import io.invertase.firebase.auth.RNFirebaseAuthPackage;


public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost =
      new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
          return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          packages.add(new ReactNativeFirebaseAppPackage());
          packages.add(new RNFirebaseAuthPackage());

          return packages;
        }

        @Override
        protected String getJSMainModuleName() {
          return "index";
        }
      };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
    initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
  }

  /**
   * Loads Flipper in React Native templates. Call this in the onCreate method with something like
   * initializeFlipper(this, getReactNativeHost().getReactInstanceManager());
   *
   * @param context
   * @param reactInstanceManager
   */
  private static void initializeFlipper(
      Context context, ReactInstanceManager reactInstanceManager) {
    if (BuildConfig.DEBUG) {
      try {
        /*
         We use reflection here to pick up the class that initializes Flipper,
        since Flipper library is not available in release mode
        */
        Class<?> aClass = Class.forName("com.myApp.ReactNativeFlipper");
        aClass
            .getMethod("initializeFlipper", Context.class, ReactInstanceManager.class)
            .invoke(null, context, reactInstanceManager);
      } catch (ClassNotFoundException e) {
        e.printStackTrace();
      } catch (NoSuchMethodException e) {
        e.printStackTrace();
      } catch (IllegalAccessException e) {
        e.printStackTrace();
      } catch (InvocationTargetException e) {
        e.printStackTrace();
      }
    }
  }
}

并且我尝试使用Firebase身份验证的位置在此组件中:

import React, { useState, useEffect } from 'react';
import { Text, View } from 'react-native';
import { Form, Item, Input, Label, Button } from 'native-base';
import styles from './styles';
import auth from '@react-native-firebase/auth';


const LoginScreen = () => {
    const [initializing, setInitializing] = useState(true);
    const [email, setEmail] = useState(null);
    const [user, setUser] = useState(null);

    const [password, setPassword] = useState(null);

    function onAuthStateChanged(user) {
        setUser(user);
        if (initializing) setInitializing(false);
    }

    useEffect(() => {
        const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
        return subscriber; // unsubscribe on unmount
    }, []);

    if (initializing) return null;


    if (!user) {

        return (
            <View style={styles.container}>
                <Text style={styles.formTitle}>Portland</Text>
                <Item fixedLabel style={styles.input}>
                    <Input
                        placeholder="Email"
                        onChange={(e) => setEmail(e.nativeEvent.text)}
                        style={styles.inputField}
                        value={email}
                    />
                </Item>
                <Item fixedLabel style={styles.input}>
                    <Input
                        placeholder="Password"
                        onChange={(e) => setPassword(e.nativeEvent.text)}
                        style={styles.inputField}
                        value={password}
                    />
                </Item>

                <Button onPress={() => console.warn(email, password)} style={styles.button}>
                    <Text style={styles.buttonText}>Sign in</Text>
                </Button>
            </View>
        )
    }

    return (
    <Text>Welcome</Text>
    );

};

export default LoginScreen;

要安装Firebase模块,我已遵循此网站https://rnfirebase.io/中的指南。

reactjs firebase react-native firebase-authentication react-native-firebase
1个回答
1
投票

一切看起来都很好,您是否检查了环境变量,例如ANDROID_HOME?

© www.soinside.com 2019 - 2024. All rights reserved.