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

Question

我正在创建一个react-native应用程序，我正在使用导航反应导航。

我正试图获得以下行为：

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

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

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

这就是我现在所做的，但没有按预期工作。

    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: (
             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之前调用抽屉关闭方法。

None

在React Navigation中的标题上显示None

this.props.navigation.closeDrawer(); this.props.navigation.naviagte('ANOTHER_SCREEN'); 仅在BackButton之后的BackButton或StackNavigation之后的push中显示。因此，

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

Answer 2

1。导航抽屉未关闭

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

2。后退按钮未显示

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