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

Question

我正在创建一个 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;

Answer 1

使用导航时关闭抽屉

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

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

在 React Navigation 的标题上显示 BackButton

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

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

Answer 2

1.导航抽屉未关闭

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

2。后退按钮未显示

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