【问题标题】:You attempted to use a firebase module that's not installed on your android project by calling firebase.storage()您试图通过调用 firebase.storage() 来使用未安装在您的 android 项目上的 firebase 模块
【发布时间】:2018-02-17 13:09:18
【问题描述】:

我尝试使用 react-native-firebase 模块在 React Native 上使用 firebase 存储,当你调用 firebase 存储时,我收到此错误:

You attempted to use a firebase module that's not installed on your android project by calling firebase.storage()2IM.png

我已经添加了所有必要的依赖项。

android/app/build.gradle

apply plugin: "com.android.application"
import com.android.build.OutputFile

project.ext.react = [
    entryFile: "index.js"
]

apply from: "../../node_modules/react-native/react.gradle"
def enableSeparateBuildPerCPUArchitecture = false
def enableProguardInReleaseBuilds = false

android {
    compileSdkVersion 26
    buildToolsVersion "26.0.2"

    defaultConfig {
        applicationId "com.detecta.detecta"
        minSdkVersion 19
        targetSdkVersion 26
        versionCode 5
        versionName "1.1.6"
        vectorDrawables.useSupportLibrary = true
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }
    signingConfigs {
        release {
            if (project.hasProperty('MYAPP_RELEASE_STORE_FILE')) {
                storeFile file(MYAPP_RELEASE_STORE_FILE)
                storePassword MYAPP_RELEASE_STORE_PASSWORD
                keyAlias MYAPP_RELEASE_KEY_ALIAS
                keyPassword MYAPP_RELEASE_KEY_PASSWORD
            }
        }
    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86"
        }
    }
    buildTypes {
        release {
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
            signingConfig signingConfigs.release
        }
    }
    // applicationVariants are e.g. debug, release
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
            def versionCodes = ["armeabi-v7a":1, "x86":2]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        versionCodes.get(abi) * 1048576 + 
defaultConfig.versionCode
            }
        }
    }
}

dependencies {
    compile project(':react-native-image-crop-picker')
    compile project(':react-native-svg')
    compile(project(':react-native-firebase')) {
        transitive = false
    }
    compile fileTree(dir: "libs", include: ["*.jar"])
    compile "com.android.support:appcompat-v7:26.1.0"
    compile "com.facebook.react:react-native:+"  // From node_modules

    compile "com.google.android.gms:play-services-base:11.8.0"
    compile "com.google.firebase:firebase-core:11.8.0"
    compile "com.google.firebase:firebase-auth:11.8.0"
    compile "com.google.firebase:firebase-database:11.8.0"
    compile "com.google.firebase:firebase-storage:11.8.0"
}

// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
    from configurations.compile
    into 'libs'
}
apply plugin: 'com.google.gms.google-services'

MainApplication.java

package com.detecta;

import android.app.Application;

import com.facebook.react.BuildConfig;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

import io.invertase.firebase.RNFirebasePackage;
import io.invertase.firebase.auth.RNFirebaseAuthPackage;
import io.invertase.firebase.database.RNFirebaseDatabasePackage;
import io.invertase.firebase.storage.RNFirebaseStoragePackage;

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() {
      return Arrays.<ReactPackage>asList(
              new MainReactPackage(),
              new RNFirebasePackage(),
              new RNFirebaseAuthPackage(),
              new RNFirebaseDatabasePackage(),
              new RNFirebaseStoragePackage()
      );
    }

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

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

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

调用方法

import firebase from 'react-native-firebase';

/*...*/

uploadImage(userId) {
    path = this.state.image ? this.state.image.uri : null;
    firebase
        .storage()
        .ref(`users/${userId}/profile.jpg`)
        .putFile(path)
        .then(snapshot => {
            console.log(snapshot)
        })
        .catch(err => {
            console.log(err)
        });
};

【问题讨论】:

  • 您在添加这些后是否重新构建了您的应用程序(不仅仅是重新启动打包程序)?
  • 是的,我使用 android studio 清理并重建了应用程序。
  • @ItaloFernándezSalgado 你能解决它吗?我遇到了同样的问题!感谢您的帮助.. 谢谢
  • @Mutaz 抱歉没有使用 firebase 存储。我将配置文件图像保存为 firebase 数据库上的字符串作为解决方法。
  • 我在 Firebase 邀请中遇到了这个问题

标签: react-native-android react-native-firebase


【解决方案1】:

将以下内容添加到应用程序 MainApplication 类的导入部分:

import io.invertase.firebase.messaging.RNFirebaseMessagingPackage;
import io.invertase.firebase.notifications.RNFirebaseNotificationsPackage;

将以下内容添加到包循环中:

 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 RNFirebaseMessagingPackage());
         packages.add(new RNFirebaseNotificationsPackage());
         return packages;
    }

【讨论】:

    【解决方案2】:

    同样的错误发生在我身上,但通过以下方式解决......

    **

    我已经更改了一些文件,它应该可以正常工作。

    我的 MainApplication.java 代码在这里...

    package com.scllogin;
    
    import android.app.Application;
    import android.util.Log;
    
    // import co.apptailor.googlesignin.RNGoogleSigninPackage;
    
    import io.invertase.firebase.RNFirebasePackage;
    import io.invertase.firebase.auth.RNFirebaseAuthPackage;
    
    
    import com.facebook.react.PackageList;
    import com.facebook.hermes.reactexecutor.HermesExecutorFactory;
    import com.facebook.react.bridge.JavaScriptExecutorFactory;
    import com.facebook.react.ReactApplication;
    import com.facebook.reactnative.androidsdk.FBSDKPackage;
    import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
    import com.facebook.react.ReactNativeHost;
    import com.facebook.react.ReactPackage;
    import com.facebook.soloader.SoLoader;
    
    import java.util.List;
    
    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();
          // new RNFirebaseNotificationsPackage();
          // new MainReactPackage();
          // new RNFirebasePackage();
          // new RNGoogleSigninPackage();
          // new RNFirebaseAuthPackage();
          packages.add(new RNFirebaseAuthPackage());
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
          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);
      }
    }
    

    而我的 android/app/build.gradle 文件是

    apply plugin: "com.android.application"
    
    import com.android.build.OutputFile
    
    /**
     * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
     * and bundleReleaseJsAndAssets).
     * These basically call `react-native bundle` with the correct arguments during the Android build
     * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
     * bundle directly from the development server. Below you can see all the possible configurations
     * and their defaults. If you decide to add a configuration block, make sure to add it before the
     * `apply from: "../../node_modules/react-native/react.gradle"` line.
     *
     * project.ext.react = [
     *   // the name of the generated asset file containing your JS bundle
     *   bundleAssetName: "index.android.bundle",
     *
     *   // the entry file for bundle generation
     *   entryFile: "index.android.js",
     *
     *   // https://facebook.github.io/react-native/docs/performance#enable-the-ram-format
     *   bundleCommand: "ram-bundle",
     *
     *   // whether to bundle JS and assets in debug mode
     *   bundleInDebug: false,
     *
     *   // whether to bundle JS and assets in release mode
     *   bundleInRelease: true,
     *
     *   // whether to bundle JS and assets in another build variant (if configured).
     *   // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
     *   // The configuration property can be in the following formats
     *   //         'bundleIn${productFlavor}${buildType}'
     *   //         'bundleIn${buildType}'
     *   // bundleInFreeDebug: true,
     *   // bundleInPaidRelease: true,
     *   // bundleInBeta: true,
     *
     *   // whether to disable dev mode in custom build variants (by default only disabled in release)
     *   // for example: to disable dev mode in the staging build type (if configured)
     *   devDisabledInStaging: true,
     *   // The configuration property can be in the following formats
     *   //         'devDisabledIn${productFlavor}${buildType}'
     *   //         'devDisabledIn${buildType}'
     *
     *   // the root of your project, i.e. where "package.json" lives
     *   root: "../../",
     *
     *   // where to put the JS bundle asset in debug mode
     *   jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
     *
     *   // where to put the JS bundle asset in release mode
     *   jsBundleDirRelease: "$buildDir/intermediates/assets/release",
     *
     *   // where to put drawable resources / React Native assets, e.g. the ones you use via
     *   // require('./image.png')), in debug mode
     *   resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
     *
     *   // where to put drawable resources / React Native assets, e.g. the ones you use via
     *   // require('./image.png')), in release mode
     *   resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
     *
     *   // by default the gradle tasks are skipped if none of the JS files or assets change; this means
     *   // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
     *   // date; if you have any other folders that you want to ignore for performance reasons (gradle
     *   // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
     *   // for example, you might want to remove it from here.
     *   inputExcludes: ["android/**", "ios/**"],
     *
     *   // override which node gets called and with what additional arguments
     *   nodeExecutableAndArgs: ["node"],
     *
     *   // supply additional arguments to the packager
     *   extraPackagerArgs: []
     * ]
     */
    
    project.ext.react = [
        entryFile: "index.js",
        enableHermes: false,  // clean and rebuild if changing
    ]
    
    apply from: "../../node_modules/react-native/react.gradle"
    
    /**
     * Set this to true to create two separate APKs instead of one:
     *   - An APK that only works on ARM devices
     *   - An APK that only works on x86 devices
     * The advantage is the size of the APK is reduced by about 4MB.
     * Upload all the APKs to the Play Store and people will download
     * the correct one based on the CPU architecture of their device.
     */
    def enableSeparateBuildPerCPUArchitecture = false
    
    /**
     * Run Proguard to shrink the Java bytecode in release builds.
     */
    def enableProguardInReleaseBuilds = false
    
    /**
     * The preferred build flavor of JavaScriptCore.
     *
     * For example, to use the international variant, you can use:
     * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
     *
     * The international variant includes ICU i18n library and necessary data
     * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
     * give correct results when using with locales other than en-US.  Note that
     * this variant is about 6MiB larger per architecture than default.
     */
    def jscFlavor = 'org.webkit:android-jsc:+'
    
    /**
     * Whether to enable the Hermes VM.
     *
     * This should be set on project.ext.react and mirrored here.  If it is not set
     * on project.ext.react, JavaScript will not be compiled to Hermes Bytecode
     * and the benefits of using Hermes will therefore be sharply reduced.
     */
    def enableHermes = project.ext.react.get("enableHermes", false);
    
    android {
        compileSdkVersion rootProject.ext.compileSdkVersion
    
        compileOptions {
            sourceCompatibility JavaVersion.VERSION_1_8
            targetCompatibility JavaVersion.VERSION_1_8
        }
    
        defaultConfig {
            applicationId "com.scllogin"
            minSdkVersion rootProject.ext.minSdkVersion
            targetSdkVersion rootProject.ext.targetSdkVersion
            versionCode 1
            versionName "1.0"
        }
        splits {
            abi {
                reset()
                enable enableSeparateBuildPerCPUArchitecture
                universalApk false  // If true, also generate a universal APK
                include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
            }
        }
        signingConfigs {
            debug {
                storeFile file('debug.keystore')
                storePassword 'android'
                keyAlias 'androiddebugkey'
                keyPassword 'android'
            }
        }
        buildTypes {
            debug {
                signingConfig signingConfigs.debug
            }
            release {
                // Caution! In production, you need to generate your own keystore file.
                // see https://facebook.github.io/react-native/docs/signed-apk-android.
                signingConfig signingConfigs.debug
                minifyEnabled enableProguardInReleaseBuilds
                proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
            }
        }
        // applicationVariants are e.g. debug, release
        applicationVariants.all { variant ->
            variant.outputs.each { output ->
                // For each separate APK per architecture, set a unique version code as described here:
                // https://developer.android.com/studio/build/configure-apk-splits.html
                def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
                def abi = output.getFilter(OutputFile.ABI)
                if (abi != null) {  // null for the universal-debug, universal-release variants
                    output.versionCodeOverride =
                            versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
                }
    
            }
        }
    
        packagingOptions {
            pickFirst '**/armeabi-v7a/libc++_shared.so'
            pickFirst '**/x86/libc++_shared.so'
            pickFirst '**/arm64-v8a/libc++_shared.so'
            pickFirst '**/x86_64/libc++_shared.so'
            pickFirst '**/x86/libjsc.so'
            pickFirst '**/armeabi-v7a/libjsc.so'
        }
    }
    
    dependencies {
        implementation project(':react-native-fbsdk')
    
        implementation "com.google.firebase:firebase-auth:17.0.0"
        implementation project(':react-native-firebase')
        implementation "com.google.android.gms:play-services-base:16.1.0"
        implementation "com.google.firebase:firebase-core:16.0.9"
    
        implementation "com.google.firebase:firebase-storage:15.0.2"
        implementation "com.google.firebase:firebase-auth"
        implementation project(':react-native-gesture-handler')
        implementation 'com.google.firebase:firebase-core:17.0.0'
        implementation fileTree(dir: "libs", include: ["*.jar"])
        implementation "com.facebook.react:react-native:+"  // From node_modules
    
        if (enableHermes) {
          def hermesPath = "../../node_modules/hermesvm/android/";
          debugImplementation files(hermesPath + "hermes-debug.aar")
          releaseImplementation files(hermesPath + "hermes-release.aar")
        } else {
          implementation jscFlavor
        }
    }
    
    // Run this once to be able to run the application with BUCK
    // puts all compile dependencies into folder libs for BUCK to use
    task copyDownloadableDepsToLibs(type: Copy) {
        from configurations.compile
        into 'libs'
    }
    
    apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
    apply plugin: 'com.google.gms.google-services'
    

    我的 android/build.gradle 文件是..

    // Top-level build file where you can add configuration options common to all sub-projects/modules.
    
    buildscript {
        ext {
            buildToolsVersion = "28.0.3"
            minSdkVersion = 16
            compileSdkVersion = 28
            targetSdkVersion = 28
            supportLibVersion = "28.0.0"
        }
        repositories {
            
            google()
            jcenter()
        }
        dependencies {
            classpath("com.android.tools.build:gradle:3.4.1")
            classpath 'com.google.gms:google-services:4.2.0'
    
            // NOTE: Do not place your application dependencies here; they belong
            // in the individual module build.gradle files
        }
    }
    
    allprojects {
        repositories {
            mavenLocal()
            maven {
                // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
                url("$rootDir/../node_modules/react-native/android")
            }
            maven {
                // Android JSC is installed from npm
                url("$rootDir/../node_modules/jsc-android/dist")
            }
    
            google()
            jcenter()
        }
    }
    

    我的 App.js 文件是...

    import React, { Component } from 'react';
    import { View, Button, Text, TextInput, Image } from 'react-native';
    
    import firebase from 'react-native-firebase';
    
    const successImageUri = 'https://cdn.pixabay.com/photo/2015/06/09/16/12/icon-803718_1280.png';
    
    export default class MobileLoginScreen extends Component {
      constructor(props) {
        super(props);
        this.unsubscribe = null;
        this.state = {
          user: null,
          message: '',
          codeInput: '',
          phoneNumber: '+91',
          confirmResult: null,
        };
      }
    
      componentDidMount() {
        this.unsubscribe = firebase.auth().onAuthStateChanged((user) => {
          if (user) {
            this.setState({ user: user.toJSON() });
          } else {
            // User has been signed out, reset the state
            this.setState({
              user: null,
              message: '',
              codeInput: '',
              phoneNumber: '+91',
              confirmResult: null,
            });
          }
        });
      }
    
      componentWillUnmount() {
         if (this.unsubscribe) this.unsubscribe();
      }
    
      signIn = () => {
        const { phoneNumber } = this.state;
        this.setState({ message: 'Sending code ...' });
    
        firebase.auth().signInWithPhoneNumber(phoneNumber)
          .then(confirmResult => this.setState({ confirmResult, message: 'Code has been sent!' }))
          .catch(error => this.setState({ message: `Sign In With Phone Number Error: ${error.message}` }));
      };
    
      confirmCode = () => {
        const { codeInput, confirmResult } = this.state;
    
        if (confirmResult && codeInput.length) {
          confirmResult.confirm(codeInput)
            .then((user) => {
              this.setState({ message: 'Code Confirmed!' });
            })
            .catch(error => this.setState({ message: `Code Confirm Error: ${error.message}` }));
        }
      };
    
      signOut = () => {
        firebase.auth().signOut();
      }
    
      renderPhoneNumberInput() {
       const { phoneNumber } = this.state;
    
        return (
          <View style={{ padding: 25 }}>
            <Text>Enter phone number:</Text>
            <TextInput
              autoFocus
              style={{ height: 40, marginTop: 15, marginBottom: 15 }}
              onChangeText={value => this.setState({ phoneNumber: value })}
              placeholder={'Phone number ... '}
              value={phoneNumber}
            />
            <Button title="Sign In" color="green" onPress={this.signIn} />
          </View>
        );
      }
    
      renderMessage() {
        const { message } = this.state;
    
        if (!message.length) return null;
    
        return (
          <Text style={{ padding: 5, backgroundColor: '#000', color: '#fff' }}>{message}</Text>
        );
      }
    
      renderVerificationCodeInput() {
        const { codeInput } = this.state;
    
        return (
          <View style={{ marginTop: 25, padding: 25 }}>
            <Text>Enter verification code below:</Text>
            <TextInput
              autoFocus
              style={{ height: 40, marginTop: 15, marginBottom: 15 }}
              onChangeText={value => this.setState({ codeInput: value })}
              placeholder={'Code ... '}
              value={codeInput}
            />
            <Button title="Confirm Code" color="#841584" onPress={this.confirmCode} />
          </View>
        );
      }
    
      render() {
        const { user, confirmResult } = this.state;
        return (
          <View style={{ flex: 1 }}>
    
            {!user && !confirmResult && this.renderPhoneNumberInput()}
    
            {this.renderMessage()}
    
            {!user && confirmResult && this.renderVerificationCodeInput()}
    
            {user && (
              <View
                style={{
                  padding: 15,
                  justifyContent: 'center',
                  alignItems: 'center',
                  backgroundColor: '#77dd77',
                  flex: 1,
                }}
              >
                <Image source={{ uri: successImageUri }} style={{ width: 100, height: 100, marginBottom: 25 }} />
                <Text style={{ fontSize: 25 }}>Signed In!</Text>
                <Text>{JSON.stringify(user)}</Text>
                <Button title="Sign Out" color="red" onPress={this.signOut} />
              </View>
            )}
          </View>
        );
      }
    }
    

    您也可以按照这些链接使用 firebase 进行移动身份验证。

    https://aboutreact.com/example-of-google-sign-in-in-react-native/

    https://rnfirebase.io/docs/v5.x.x/auth/phone-auth..

    这些链接对我有用..

    【讨论】:

    • 这是一个非常模糊的答案,请说明文件的哪个部分使它适合您?一开始的问题是什么?
    • 这不是一个合适的答案,它没有解释任何东西,只是一大堆行代码
    • 如此冗长的评论! :S 我需要一些帮助
    猜你喜欢
    • 2022-01-06
    • 1970-01-01
    • 1970-01-01
    • 2021-05-27
    • 2020-12-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-30
    相关资源
    最近更新 更多