如何使用 react-navigation 推送新场景？

Posted 2023-02-23

【中文标题】如何使用 react-navigation 推送新场景？

【英文标题】：How to push a new scene using react-navigation?

【发布时间】：2018-10-29 06:07:15

【问题描述】：

我正在创建一个 react-native 应用程序，并将其用于导航 react-navigation。

我正在尝试获得以下行为：

有主抽屉菜单，如果我从抽屉导航到一个项目，抽屉应该关闭，导航到场景并为抽屉中的所有项目提供相同的导航栏。 在一个项目中，我有一个标签导航器。

我实际实现的唯一问题是：抽屉没有在项目点击时关闭。有什么建议吗？

如果我从一个场景导航到另一个场景（这个场景不是抽屉项目），我可以导航到那个场景，但我的标题（导航栏）没有改变，而且我没有后退按钮。有什么建议吗？

这是我目前所做的，但没有按预期工作。

import React from "react";
import 
  createStackNavigator,
  createSwitchNavigator,
  createDrawerNavigator,
  createMaterialTopTabNavigator,
 from "react-navigation";
import  StyleSheet  from "react-native";
import  Icon  from "react-native-elements";
import  AppConfig  from "../constants";
import  AppSizes, AppColors  from "../theme";

import DrawerMenu from "./drawerMenu";
// import DrawerScreen from './DrawerScreen'

// Scenes
import LaunchContainer from "../containers/Launch";
import LoginContainer from "../containers/Login";
import HomeContainer from "../containers/Home";
import RoomsHistoryContainer from "../containers/RoomsHistory";
import LogoutContainer from "../containers/Logout";
import ChatContainer from "../containers/Chat";

const styles = StyleSheet.create(
  iconStyle: 
    marginLeft: 10,
  ,
);

const TabStack = createMaterialTopTabNavigator(
  
    Conversation: 
      screen: RoomsHistoryContainer,
      navigationOptions: 
        title: "Conversatii",
      ,
    ,
    Comunitate: 
      screen: LaunchContainer,
      navigationOptions: 
        title: "Comunitate",
      ,
    ,
    Chatroom: 
      screen: LaunchContainer,
      navigationOptions: 
        title: "Chatroom",
      ,
    ,
  ,
  
    tabBarOptions: 
      style: 
        backgroundColor: AppColors.tabbar.background,
      ,
      activeTintColor: AppColors.tabbar.activeTintColor,
      inactiveTintColor: AppColors.tabbar.inactiveTintColor,
      indicatorStyle: 
        backgroundColor: AppColors.tabbar.indicatorColor,
      ,
    ,
  
);

const AppStack = createStackNavigator(
  
    Home:  screen: HomeContainer ,
    Calendar:  screen: LaunchContainer ,
    Comunitate: 
      screen: TabStack,
      navigationOptions:  title: "Comunitate" ,
    ,
    Logout:  screen: LogoutContainer ,
    ChatMessage:  screen: ChatContainer ,
  ,
  
    headerMode: "float",
    navigationOptions: ( navigation ) => (
      ...AppConfig.navbarProps,
      title: "My app",
      headerLeft: (
        <Icon
          name="menu"
          containerStyle=styles.iconStyle
          color="#fff"
          size=30
          onPress=() => navigation.toggleDrawer()
        />
      ),
    ),
  
);

const DrawerStack = createDrawerNavigator(
  
    Main:  screen: AppStack ,
  ,
  
    contentComponent: DrawerMenu,
    contentOptions: 
      activeTintColor: "white",
      activeBackgroundColor: "white",
    ,
    drawerWidth: AppSizes.screen.width > 250 ? AppSizes.screen.width - 80 : 250,
  
);

const AuthStack = createStackNavigator(
  
    SignIn: 
      screen: LoginContainer,
      navigationOptions: 
        title: "Login",
      ,
    ,
    SignUp: 
      screen: LoginContainer,
      navigationOptions: 
        title: "Logout",
      ,
    ,
  ,
  
    headerMode: "none",
  
);

const AppNavigator = createSwitchNavigator(
  
    Launch:  screen: LaunchContainer ,
    App:  screen: DrawerStack ,
    Auth:  screen: AuthStack ,
  ,
  
    initialRouteName: "Launch",
  
);

export default AppNavigator;

【参考方案1】：

使用导航时关闭抽屉

简单地说，在导航之前调用抽屉关闭方法。

this.props.navigation.closeDrawer();
this.props.navigation.naviagte('ANOTHER_SCREEN');

在 React Navigation 的标题上显示 BackButton

BackButton 仅在 push 或 navigate 之后显示在同一 StackNavigation 中的另一个屏幕中的 StackNavigation。因此，

检查屏幕的位置。是StackNavigation中的屏幕组件吗？ 它是从另一个屏幕移入同一StackNavigation吗？ 您的标题模式是否在navigationOptions 中？

【参考方案2】：

1.导航抽屉未关闭

这是不寻常的，如果您的自定义抽屉组件中的所有内容都正确，它应该可以工作。但是你总是可以使用this.props.navigation.closeDrawer();

2。后退按钮未显示

我认为这发生在 AppStack 中。你的代码看起来不错。请务必使用this.props.navigation.navigate(screenName)。如果按下硬件后退按钮转到上一个屏幕，则堆栈导航工作正常。所以问题出在你的标题渲染中。我建议现在删除所有自定义选项，并尝试使用简单的 createStackNavigator 而不使用任何导航选项。这是指出问题根源的第一步。