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

Posted 2023-02-16

【中文标题】裸反应本机项目的firebase身份验证

【英文标题】：firebase authentication for bare react native project

【发布时间】：2022-01-21 14:02:22

【问题描述】：

我正在尝试使用电子邮件和密码启用具有 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()
exportauth;

---

然后用户可以在此页面中输入他们的凭据，并且用户在此处输入的数据应在 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 的教程完成了这段代码。但现在我正在裸反应原生项目上尝试这个。

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

【参考方案1】：

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

寻找这个firebase react-native