reactjs - 如何使用 React Navigation 5 在 Action Creators 中导航到屏幕
问题描述
在React Navigation 5 Auth Flow中,它说屏幕将在条件状态更改时自动导航。
当isAuthenticated 的状态变为 true时,我已将屏幕设置为导航到 HomeScreen 。- 控制台中没有错误。isAuthenticated 确实更改为 true,但状态更改后屏幕未导航到 HomeScreen。
- 我还尝试在动作创建者中使用 {NavigationActions} 和 {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);
应用导航.js
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import AuthStackNav from './AuthStackNav';
const AppNav = () => {
return (
<NavigationContainer>
<AuthStackNav />
</NavigationContainer>
);
};
export default AppNav;
解决方案
我能够通过本指南解决它。
根导航.js
import * as React from 'react';
export const navigationRef = React.createRef();
export function navigate(name, params) {
navigationRef.current?.navigate(name, params);
}
应用导航.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');
};
推荐阅读
- c++ - 统计结构“字段 'st_size' 无法解析
- php - Laravel 中的下拉列表不显示
- python - @staticmethod 装饰器有什么作用吗?
- css - div(表格)的内容没有正确转换
- kotlin - 带有拆分的函数 sortBy
- scala - 启动琐碎的独立 Spark 应用程序时出现问题:java.lang.NoClassDefFoundError: org/apache/spark/sql/internal/StaticSQLConf$
- racket - 球拍函数递归
- scala - 在 Scala 中解析 CSV 文件
- android - 使用 ExoPlayer 在电视应用中显示在线视频
- python - 从python中的if循环返回for循环