gpt4 book ai didi

reactjs - 如何使用 React Navigation 5 在 Action Creator 中导航到屏幕

转载 作者:行者123 更新时间:2023-12-01 21:40:03 26 4
gpt4 key购买 nike

React Navigation 5 Auth Flow ,它说屏幕将在条件状态更改时自动导航。

  • 我已将屏幕设置为在
    状态下导航到主屏幕isAuthenticated 更改为 true。
  • 控制台没有错误。 isAuthenticated 确实更改为是的,但是屏幕在 state 之后没有导航到 HomeScreen改变。
  • 我还尝试使用替代方法,例如 {NavigationActions} 和 Action 创建者中的 {CommonActions}。强制导航,但是也没有工作。

AuthStackNav.js

import React from 'react';
import { connect } from 'react-redux';
import {createStackNavigator} from '@react-navigation/stack';
import AuthScreen from '../screens/AuthScreen';
import HomeScreen from '../screens/HomeScreen';

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);

userActions.js

import {LOGIN_WITH_FACEBOOK} from './types';
import {NavigationActions} from 'react-navigation';
import { CommonActions } from '@react-navigation/native';

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

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;

AuthScreen.js

import React from 'react';
import {Text, View, StyleSheet, Image, TouchableOpacity, SafeAreaView} from 'react-native';
import { connect } from 'react-redux';
import {loginWithFacebook} from '../actions/userActions';

const AuthScreen = ({loginWithFacebook}) => {

return (
<View style={styles.screenContainer}>

<TouchableOpacity
activeOpacity={0.5}
onPress={loginWithFacebook}
> Facebook Login</TouchableOpacity>

</View>
);
};
const mapDispatchToProps = {
loginWithFacebook
};
export default connect(null, mapDispatchToProps)(AuthScreen);

AppNav.js

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import AuthStackNav from './AuthStackNav';

const AppNav = () => {
return (
<NavigationContainer>
<AuthStackNav />
</NavigationContainer>
);
};

export default AppNav;

最佳答案

我能够用这个 guide 解决它.

根导航.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');
};

关于reactjs - 如何使用 React Navigation 5 在 Action Creator 中导航到屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61498335/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com