react-native - 如何使用 react 导航推送新场景？

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

使用导航时关闭抽屉

很简单，在naviagate之前调用drawer close方法。

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

在 React Navigation 的页眉上显示 BackButton

BackButton 仅在 push 或 navigate 之后显示在 StackNavigation 来自同一 中的另一个屏幕堆栈导航。因此，

• 检查屏幕的位置。是StackNavigation中的screen组件吗？
• 它是否从同一 StackNavigation 中的另一个屏幕移入？
• navigationOptions 中的页眉模式是否正确？