问答

在redux action creator里如何转换屏幕 React Navigation 5

作者:admin 2021-09-08 我要评论

userActions.js import {LOGIN_WITH_FACEBOOK} from './types';export const loginWithFacebook = () = (dispatch) = { dispatch({ type: LOGIN_WITH_FACEBOOK, ...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

userActions.js

import {LOGIN_WITH_FACEBOOK} from './types';

export const loginWithFacebook = () => (dispatch) => {        
    dispatch({ type: LOGIN_WITH_FACEBOOK, payload: {isAuthenticated: true} });                                              
};

AuthStackNav.js

const AuthStackNav = ({isAuthenticated}) => {
    const AuthStack = createStackNavigator();

    return (        
        <AuthStack.Navigator initialRouteName='Auth'>
        {
            isAuthenticated ?
            <AuthStack.Screen name='Home' component={HomeScreen} />                
            :
            <AuthStack.Screen  name='Auth' component={AuthScreen} />      
        }                       
                         
        </AuthStack.Navigator>
        
    );
};
const mapStateToProps = ({isAuthenticated}) => {
    return {isAuthenticated};
};
export default connect(mapStateToProps, null)(AuthStackNav);

userReducer.js

import {LOGIN_WITH_FACEBOOK} from '../actions/types.js';

const initialState = {
    isAuthenticated: false    
};

const userReducer = (state=initialState, action) => {
    switch(action.type){
        case LOGIN_WITH_FACEBOOK: 
            return {...state, ...action.payload};
        default: 
            return state;
    }
}
export default userReducer;

rootReducer.js

import {combineReducers} from 'redux';
import userReducer from './userReducer';


const rootReducer = combineReducers({
    user: userReducer
 })
 export default rootReducer
 
###

我按照这个档案解决的 https://reactnavigation.org/d...

RootNavigation.js

import * as React from 'react';

export const navigationRef = React.createRef();

export function navigate(name, params) {
  navigationRef.current?.navigate(name, params);
}

AppNav.js

import { navigationRef } from './RootNavigation.js';
const AppNav = () => {
    return (
        <NavigationContainer ref={navigationRef} >
            <AuthStackNav />
        </NavigationContainer>
    );
};

export default AppNav;

userActions.js

export const loginWithFacebook = () => (dispatch) => {        
    dispatch({ type: LOGIN_WITH_FACEBOOK, payload: {isAuthenticated: true} });   
    RootNavigation.navigate('Home');                                    
};

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • 在redux action creator里如何转换屏幕

    在redux action creator里如何转换屏幕

  • 为什么这里的this被改变了

    为什么这里的this被改变了

  • requestAnimationFrame,有没有自动降

    requestAnimationFrame,有没有自动降

  • vue源码中vnode.js中构造函数中的带?参

    vue源码中vnode.js中构造函数中的带?参

腾讯云代理商
海外云服务器