Question

我目前有一个基本的用户身份验证导航，如下所示。用户登录后，他们会看到带有底部导航的主页，该导航可在应用程序的主屏幕上导航。所有这些都完美。

///
App.js
///
import React, { useState, Component } from 'react';
import { createStackNavigator, createBottomTabNavigator, createSwitchNavigator, createAppContainer } from 'react-navigation';
import AuthLoadingScreen from "./screens/AuthLoadingScreen";
import SignInScreen from "./screens/SignInScreen";
import SignUpScreen from "./screens/SignUpScreen";
import OptionsScreen from "./screens/OptionsScreen";
import LinksScreen from "./screens/LinksScreen";
import WelcomeScreen from "./screens/WelcomeScreen";
import NewPostScreen from "./screens/NewPostScreen";

const AuthStack = createStackNavigator({ SignIn: SignInScreen, SignUp: SignUpScreen });

const AppStack = createBottomTabNavigator({ Home: WelcomeScreen, Options: OptionsScreen, Links: LinksScreen });

const SwitchRouteConfig = {
  AuthLoading: AuthLoadingScreen,
  Auth: AuthStack,
  App: AppStack,
}

const SwitchConfig = {
  initialRouteName: 'AuthLoading',
}

const Navigator = createAppContainer(createSwitchNavigator(SwitchRouteConfig, SwitchConfig));
export default function App(props) {
     return (
           <Navigator />
     );
}

问题是这样的：我有一个名为NewPostScreen的屏幕，该屏幕导入到app.js上。我试图在LinksScreen.js上添加一个将用户链接到帖子屏幕的按钮。我不希望NewPostScreen成为主要底部导航的一部分。

我相信我必须将此代码添加到app.js中的某个地方

const PostNavigation = createStackNavigator({
NewPost: NewPostScreen
});

这是我在LinksScreen.js上的按钮的代码

 <Button
        title="Create Post"
        onPress={() => { navigation.navigate("NewPost"));
        }}
      />

关于路线/导航的方法和教程有很多，在维护基本的用户身份验证系统的同时，我似乎无法解决此问题。

Answer 1

您可以添加StackNavigator

const AuthStack = createStackNavigator({
 SignIn: SignInScreen, 
SignUp: SignUpScree,
NewPost: NewPostScreen
});

OR

const SwitchRouteConfig = {
  AuthLoading: AuthLoadingScreen,
  Auth: AuthStack,
  App: AppStack,
  NewPost: NewPostScreen
}

反应本机页面导航

1 个答案: