React Native - Expo 错误 - “在 'firebase' 中找不到导出 'auth'：

Question

使用本机和 expo 构建一个身份验证应用程序。

创建 firebase.js 文件和 link 应用程序

在 firebase.js 中正确导出 auth 仍然无法在我的 LoginScreen.js 文件中导入 auth

一直报错

"export 'auth' was not found in 'firebase'
  11 | 
  12 |     const handleSignup = () =>{
> 13 |         auth
     |        ^
  14 |         .createUserWithEmailAndPassword(email, 
password)
  15 |         .then(usersCredentials => {
  16 |             const user = userCredentials.user;

Firebase.js

// Import the functions you need from the SDKs you need
// import * as firebase from "firebase";
import firebase from "firebase/app"
// import "firebase/auth"
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "AIzaSyB4R4he96dglIFlyGQyP8aYKLtzfGGc_ZQ",
  authDomain: "fir-auth-ec54a.firebaseapp.com",
  projectId: "fir-auth-ec54a",
  storageBucket: "fir-auth-ec54a.appspot.com",
  messagingSenderId: "211989329100",
  appId: "1:211989329100:web:765e2715889a0fc374be69"
};

// Initialize Firebase
 let app;
 if (firebase.apps.length == 0) {
     app = firebase.initializeApp(firebaseConfig)
 } else{
     app = firebase.app()
 }

 const auth = firebase.auth()

 export default { auth }

package.json

中的依赖项

"dependencies": {
    "@react-navigation/native": "^6.0.6",
    "@react-navigation/native-stack": "^6.2.5",
    "expo": "~44.0.0",
    "expo-status-bar": "~1.2.0",
    "firebase": "8.2.3",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-native": "0.64.3",
    "react-native-safe-area-context": "3.3.2",
    "react-native-screens": "~3.10.1",
    "react-native-web": "0.17.1"
  },

编辑

这是我导入 firebase 的地方：

import React, { useState } from 'react'
import { KeyboardAvoidingView, StyleSheet, Text, View } from 'react-native'
import { TextInput, TouchableOpacity } from 'react-native-web'
// import firebase from "firebase/app"
// import "firebase/auth"
import { auth } from '../firebase'

const LoginScreen = () => {
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
const handleSignup = () =>{
    auth
    .createUserWithEmailAndPassword(email, password)
    .then(userCredentials => {
        const user = userCredentials.user;
        console.log(user.email)
    })
    .catch(error => alert(error.message))
}

return (
    <KeyboardAvoidingView
        style={styles.container}
        behavior='padding'
    >
        <View style={styles.inputContainer}>
            <TextInput 
                placeholder="Email"
                value={email}
                onChangeText={text => setEmail(text) }
                style={styles.input}
            />
            <TextInput 
                placeholder="Password"
                value={password}
                onChangeText={text => setPassword(text) }
                style={styles.input}
                secureTextEntry
            />
        </View>

        <View style={styles.buttonContainer}>
            <TouchableOpacity
                onPress={() => {}}
                style={styles.buttonText}
            >`enter code here`
            <Text style={styles.button}>Log In</Text>
            </TouchableOpacity>
            <TouchableOpacity
                onPress={handleSignup}
                style={[styles.button, styles.buttonOutline]}
            >
            <Text style={styles.buttonOutlineText}>Register</Text>
            </TouchableOpacity>
        </View>
    </ KeyboardAvoidingView>

)}

export default LoginScreen

const styles = StyleSheet.create({
    container:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
    },
    inputContainer:{
        width: '80%',
    
},
input:{
    backgroundColor:'white',
    paddingHorizontal: 15,
    paddingVertical: 10,
    borderRadius: 10,
    marginTop: 5,
},
buttonContainer:{
    width: '60%',
    justifyContent:'center',
    alignItems:'center',
    marginTop: 40,
},
button:{
    backgroundColor: '#1674B5',
    width:'100%',
    padding:15,
    borderRadius:10,
    alignItems:'center'
},
buttonText:{
    color:'white',
    fontWeight:'700',
    fontSize:16,
},
buttonOutline:{
    backgroundColor:'white',
    marginTop:5,
    borderColor:'#1674B5',
    borderWidth:2,
},
buttonOutlineText:{
    color:'#1674B5',
    fontWeight:'700',
    fontSize:16,
},})

但现在我在网络浏览器模拟器上看不到任何东西。 VS 代码控制台显示 "Build Complete"。我应该怎么做才能解决它？

这是我的模拟器现在的截图：

零食给我这个错误

Answer 1

此行正在导出一个对象，作为默认导出，具有 auth 的单个属性:

export default { auth }

要导入此对象，您将使用：

import lib from './yourfile.js';

const auth = lib.auth;
// or
const { auth } = lib;

但是，如果您打算使用：

import { lib } from './yourfile.js';

删除 default 关键字以使用以下任一方式定义名为 auth 的导出：

const auth = firebase.auth()
export { auth }

或

export const auth = firebase.auth();

React Native - Expo 错误 - “在 'firebase' 中找不到导出 'auth'：

React Native - Expo Error - "export 'auth' was not found in 'firebase' :

firebase

reactjs

react-native

firebase-authentication

expo