裸反应本机项目的firebase身份验证

Question

我正在尝试使用电子邮件和密码启用具有 firebase 身份验证的系统。 这是裸反应原生项目 - 不是博览会。

这是我创建的 app.js 文件。

---

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginPage from './LoginPage';
import Homepage from './Homepage';

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen options={{headerShown:false}} name="Login" component={LoginPage} />
      <Stack.Screen name="Home" component={Homepage} />
    </Stack.Navigator>
  </NavigationContainer>
  );
}

然后我创建了一个名为 firebase.js 的文件来包含项目的 firebase 功能。

---

import * as firebase from "firebase";
// 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: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
  authDomain: "xxxxxxxxxxxxxxxxxxx",
  projectId: "xxxxxxxxxx",
  storageBucket: "xxxxxxxxxxxxxxxxx",
  messagingSenderId: "xxxxxxxxxxxxx",
  appId: "xxxxxxxxxxxxxxx"
}; 

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

---

然后用户可以在此页面中输入他们的凭据，并且用户在此处输入的数据应在 firebase 中更新。

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

const LoginPage = () => {
  const [email,setEmail] = useState('')
  const [password,setPassword] = useState('')
   
   //register user 

   const registration = () =>{
     auth
     .createUserWithEmailAndPassword(email,password)
     .then(userCredentials =>{
       const user = userCredentials.user;
     })
     .catch(error => alert(error.message))
    
   }

    return (
        <KeyboardAvoidingView
        style={styles.container}
        behavior="padding"
        >
            <View style={styles.textInputs}>
            <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.button , styles.buttonMore]}>
            <Text style={styles.buttonText}  > Login  </Text>
            </TouchableOpacity>
            
             <TouchableOpacity onPress={()=>{registration}}
              style={[styles.button , styles.buttonMore]}>
            <Text style={styles.buttonText}  > Register  </Text>
            </TouchableOpacity>
            
            </View>

        </KeyboardAvoidingView>
    )
}

export default LoginPage

const styles = StyleSheet.create({
  container:{
    flex:1,
    justifyContent:"center",
    alignItems:"center",
    backgroundColor:"#FF69B4"
  },
  textInputs:{
    width:"80%"
  },
  input:{
    backgroundColor:"white",
    paddingHorizontal:15,
    paddingVertical:10,
    borderRadius:10,
    marginTop:5,
    
  },
  buttonContainer:{
    width:"60%",
    justifyContent:"center",
    alignItems:"center",
    marginTop:30,

  },
  button:{
    backgroundColor:"#D462FF",
    width:"100%",
    borderRadius:10,
    padding:15,
    alignItems:"center"  
  },
  buttonMore:{
    backgroundColor:"#FF1493",
    marginTop:5,
  },
  buttonText:{
    color:"white",
    fontWeight:"700",
    fontSize:16
  }
})

但问题是什么都没有发生。数据未更新到 Firebase。 我使用基于 expo 的教程完成了这段代码。但现在我正在裸反应原生项目上尝试这个。

谁能指出这里有什么问题以及应该改变什么？

Answer 1

问题是您使用的是 firebase Web，这对于纯 React-native 不起作用，您需要将 firebase 用于 react-native

寻找这个firebase react-native