用户登录后，我如何从登录屏幕导航到应用程序...本机反应

Question

Props.navigation 无论我怎样尝试都是一个空对象...

所以我试图在 app.js

中有条件地渲染屏幕变化

我已经尝试了大约一百种不同的方法，但无法弄清楚，已经好几天了。请帮忙！没有错误，它只是在用户登录后不会离开。在 firebase 中...它显示他们已登录...

我想我需要一个订阅功能......如下所示，但我需要帮助让它工作，因为我是 jon snow，这不知何故需要与 useeffect 混合使用。

function handleStateChange () {
    let previousValue = isLoggedIn
    isLoggedIn = store.getState().logIn.isSignedIn;

    if(previousValue !== isLoggedIn){
     console.log(`${previousValue} ${isLoggedIn}`)
    }
}

 store.subscribe(handleStateChange);

这是 console.log... 未定义错误未定义错误假真假真

APP.JS.....

import { StyleSheet, Text, View,Button } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import WorkoutNavigator from './navigation/WorkoutNavigator';
import Colors from './constants/Colors';
import { createStore , combineReducers, applyMiddleware} from 'redux';
import workOutReducer from './store/Reducers';
import {Provider, useSelector } from 'react-redux';
import ReduxThunk from 'redux-thunk'

import { useEffect, useState } from 'react';
import { initializeApp } from "firebase/app";
import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';
import 'firebase/compat/firestore';
import LoginScreen from './screens/LoginScreen';
import loginReducer from './store/AuthStore/reducer';





const rootReducer = combineReducers({
  favorites: workOutReducer,
  logIn: loginReducer
});
const store = createStore(rootReducer, applyMiddleware(ReduxThunk));



export default function App(props) {
  const [loggedIn, setLoggedIn] = useState(false);


let isLoggedIn = store.getState().logIn.isSignedIn;




  useEffect(()=> {
    const firebaseConfig = {

},[]);

useEffect(()=>{
  setLoggedIn(isLoggedIn)
}, [isLoggedIn])


  return ( 
   
      <Provider store={store}>
     {loggedIn ?  <WorkoutNavigator /> : <LoginScreen /> }
       
      </Provider>
      
    
  );
}

...这是我的减速器...

import { SIGNIN, SignInACtion } from "./actions"


const initialState = {
    isSignedIn: false,
}

const loginReducer = (state = initialState, action) => {
    switch(action.type){
        case SIGNIN:
             return{         
                isSignedIn: true
                }
            
        
        default: return state;
   
    
    }
 
};

export default loginReducer;

如果您需要查看，请执行以下操作...

 import axios from "axios";
 
import firebase from "firebase/compat/app";
import "firebase/compat/auth";



 export const SIGNUP = 'SIGNUP';
 export const SIGNIN = 'SIGNIN';
 
 export const SignUpAction = (phone) => {
     return async dispatch => {
        try{
            await axios.post('https://us-central1-one-time-password-d8d7a.cloudfunctions.net/createUser',{
                phone
            })
          await axios.post('https://us-central1-one-time-password-d8d7a.cloudfunctions.net/requestOneTimePass',{
                phone
            })
       
         }catch(error){console.log(error)};
         dispatch({type: SIGNUP, phone: phone})
        };

     };

     
export const SignInACtion = (phone, code) => {
    return async dispatch => {
        try{
            let {data}= await axios.post('https://us-central1-one-time-password-d8d7a.cloudfunctions.net/verifyPassword',{
                 phone,
                 code
             });
             
             firebase.auth().signInWithCustomToken(data.token)
                
          } catch (error){console.log(error)};
          dispatch({type: SIGNIN, payload: {  
              isSignedin: true,
                  
             
            
              
        }})

         }
     
    }

Answer 1

Firebase'auth 提供了一种简单的方法来检查用户是否已通过身份验证，让我们利用此功能并重构代码如下：

import { StyleSheet, Text, View, Button } from "react-native";
import { LinearGradient } from "expo-linear-gradient";
import WorkoutNavigator from "./navigation/WorkoutNavigator";
import Colors from "./constants/Colors";
import { createStore, combineReducers, applyMiddleware } from "redux";
import workOutReducer from "./store/Reducers";
import { Provider, useSelector } from "react-redux";
import ReduxThunk from "redux-thunk";

import { useEffect, useState } from "react";
import { initializeApp } from "firebase/app";
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import LoginScreen from "./screens/LoginScreen";
import loginReducer from "./store/AuthStore/reducer";

const rootReducer = combineReducers({
  favorites: workOutReducer,
  logIn: loginReducer,
});
const store = createStore(rootReducer, applyMiddleware(ReduxThunk));

export default function App(props) {
  const [loggedIn, setLoggedIn] = useState(null);

  const authenticateUser = () => {
    // Detected if user is already logged in
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        setLoggedIn(true);
      } else {
        setLoggedIn(false);
      }
    });
  };
  let isLoggedIn = store.getState().logIn.isSignedIn;

  useEffect(() => {
    if (!loggedIn) {
      authenticateUser();
    }
  }, [loggedIn]);

  if (loggedIn === null) return null;

  return (
    <Provider store={store}>
      {loggedIn ? <WorkoutNavigator /> : <LoginScreen />}
    </Provider>
  );
}

用户登录后，我如何从登录屏幕导航到应用程序...本机反应

Once a user is signed in how can I navigate away from the login screen to the app... react native

reactjs

react-native

authentication

firebase-authentication

subscribe