javascript - React Navigation - 返回另一个导航器中的屏幕
问题描述
我的 createStackNavigator 屏幕中有一个 createBottomTabNavigator()。基本上我的 App.js 是这样的:
const RootStack = createStackNavigator(
{
Login: Login,
Register: Register,
Principal: {
screen: Principal,
navigationOptions: {
headerShown: false,
},
},
},
{
initialRouteName: "Login"
}
);
const AppContainer = createAppContainer(RootStack);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
在我的“Principal.js”中,我正在创建一个 createBottomTabNavigator()
const Tab = createBottomTabNavigator();
class ConnectNavigator extends React.Component {
(....)
render() {
return (
<NavigationContainer>
<Tab.Navigator (....)>
<Tab.Screen name="Home" component={CheckPage} />
<Tab.Screen name="Settings" component={SettingPage} />
</Tab.Navigator>
</NavigationContainer>
);
}
}
基本上,在我的设置页面中,我想回到我的“登录”屏幕。但是因为我有两个导航器,所以我不能。我知道,我不是很清楚,但我的问题是:“当我在 Tab.Screen 中时,我可以进入我的登录屏幕吗?”
我已经尝试this.props.navigation.navigate('Login')
在“设置”屏幕中执行此操作,但出现此错误
The action 'NAVIGATE' with payload {"name":"Login","params":{"screen":"Login"}} was not handled by any navigator.
Do you have a screen named 'Login'?
If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.
解决方案
我不确定您是否尝试过错误中提到的文档中的内容,但您可以尝试以下操作:
navigation.navigate('Home', { screen: 'Login' });
编辑:
你可以重新构造一下:
const AppNavigation = () => <NavigationContainer>
<Stack.Navigator initialRouteName={"Login"}>
<Stack.Screen
name={"Login"}
options={{
headerStyle: styles.loginHeader,
headerShown: false,
}}
component={LaunchScreen}
/>
<Stack.Screen
options={{ headerShown: false }}
name={"Principal"}
component={BottomTabNavigation}
/>
</NavigationContainer>
const Tab = createBottomTabNavigator()
const BottomTabNavigation = () => {
return (
<Tab.Navigator
initialRouteName={"Home"}
>
<Tab.Screen name="Home" component={CheckPage} />
<Tab.Screen name="Settings" component={SettingPage} />
</Tab.Navigator>
)
}
推荐阅读
- java - 使用 Firebase 回收器视图查询,我应该创建什么样的模型
- java - 通过直接更改字节来更改音频流的音量
- powershell - 希望通过另一台机器/自定义脚本执行将 Azure 文件共享映射为 Azure Windows VM 上的映射网络驱动器
- python - keras 在 vgg16 特征上训练 LSTM 模型
- php - 用mysql在php中显示排序数据
- image - 如何使用 ImageMagick 调整图像大小?(苹果系统)
- ruby - Kqueue dirextended 看什么动作?
- android - 如何编写索引?
- c++ - CMake 声明函数对 ExternalProject_Add 的依赖
- sql - postgres SQL查询中如何实现数学表达式?