在react-navigation 5.x中将createSwitchNavigator放置在哪里,以便从react-navigation 4迁移到5.x [英] Where is placed createSwitchNavigator in react-navigation 5.x for migrating from react-navigation 4 to 5.x
问题描述
我正在将React Native应用程序从react-navigation 4迁移到5.x,但是我找不到哪个包包含createSwitchNavigation.具体来说,我对auth令牌检查部分有疑问.
I'm migrating a React Native application from react-navigation 4 to 5.x and i can't find which package contains createSwitchNavigation. Specifically i have doubts with the auth token check part.
在反应导航4中,我有:
With react-navigation 4 i had:
const switchNavigator = createSwitchNavigator({
ResolveAuth: ResolveAuthScreen,
signinFlow: createStackNavigator({
Signup: SignupScreen,
Signin: SigninScreen,
}),
appFlow: createBottomTabNavigator({
TrackCreate: TrackCreateScreen,
trackListFlow: createStackNavigator({
TrackList: TrackListScreen,
TrackDetail: TrackDetailScreen
}),
Account: AccountScreen,
})
}, {
initialRouteName: 'ResolveAuth'
});
然后我有一个包含ResolveAuthScreen组件的文件.
Then i have a file containing ResolveAuthScreen component.
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
const ResolveAuthScreen = (props) => {
useEffect(() => {
if (!props.token) {
props.navigation.navigate('loginFlow');
} else {
props.navigation.navigate('TrackList');
}
}, []);
return null;
};
const mapStateToProps = (state) => {
return {
token: state.auth.token,
};
};
export default connect(mapStateToProps, null)(ResolveAuthScreen);
其余组件对于此怀疑并不重要.我想知道如何复制相同的Switch导航流. 我想知道如何创建这样的东西:
The rest of components are not important for this doubt. I want to know how to replicate the same Switch navigation flow. I would like to know how can i create something like this:
const Switch = createSwitchNavigator();
export default function App() {
return (
<NavigationContainer>
<Switch.Navigator>
<Switch.Screen name="ResolveAuth" component={ResolveAuthScreen} />
<Switch.Screen name="signinFlow" component={SignInFlowScreens} />
<Switch.Screen name="appFlow" component={AppFlowScreens} />
</Switch.Navigator>
</NavigationContainer>
);
}
推荐答案
在早期版本的React Navigation中,有两种方法可以解决此问题:
In earlier versions of React Navigation, there were 2 ways to handle this:
- 保留多个导航器,并在登录后使用切换导航器将活动导航器切换到其他导航器(推荐)
- 登录后将导航器的状态重置为所需的屏幕
但是对于v5,您需要使用上下文. 在此处中查看!
But for v5, you need to use context. Take a look at here to see a detailed example!
这篇关于在react-navigation 5.x中将createSwitchNavigator放置在哪里,以便从react-navigation 4迁移到5.x的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!