Vue Native Drawer Navigation标题设置及返回跳转异常问题咨询

【编辑提示】Vue Native 已官方弃用，以下解决方案仅针对历史遗留项目参考，不建议新业务使用该技术栈。

问题原因与解决方案 #

1. 无法为指定页面设置标题 #

你在根StackNavigator的配置中显式开启了headerMode: 'none'，该配置会全局隐藏Stack导航的默认头部，导致你在各页面navigationOptions中配置的标题无法渲染。

• 如需使用默认头部展示标题，直接删除headerMode: 'none'配置即可
• 如需自定义头部，可在页面组件内读取navigation.state.params中传递的标题参数自行渲染

2. 进入第四页后点击返回直接跳转回首页 #

你的路由嵌套结构存在逻辑错误：当前DrawerNavigator内的所有页面为平级关系，同时你又将这些页面直接注册到了根Stack下，通过Drawer菜单跳转页面时，会直接在根Stack层级压入新页面，不会保留之前的页面栈层级，因此返回时会直接跳过中间页面回到栈底的首页。
正确的路由结构设计逻辑为：根路由为DrawerNavigator，Drawer的每个菜单项对应一个独立的子StackNavigator，业务页面跳转都在对应子Stack内执行，即可保证返回逻辑按栈顺序正常回退。

修正后参考代码 #

<template>
  <app-navigator></app-navigator>
</template>

<script>
import {
  createAppContainer,
  createStackNavigator,
  createDrawerNavigator,
} from 'vue-native-router';

import Vue from 'vue-native-core';
import {VueNativeBase} from 'native-base';
Vue.use(VueNativeBase);

import LoginScreen from './screens/Login.vue';
import TenantScreen from './screens/TenantDetails.vue';
import InvoiceScreen from './screens/TenantInvoices.vue';
import PaymentScreen from './screens/PaymentHistory.vue';
import Sidebar from './screens/Sidebar/index.vue';
import React from 'react';
import {Text, View} from 'react-native';
import {DrawerItems} from 'react-navigation-drawer';

// 业务子栈：登录后流程页面栈
const BusinessStack = createStackNavigator(
  {
    TenantDetails: {
      screen: TenantScreen,
      navigationOptions: {
        headerTitle: 'Tenant Details',
      },
    },
    TenantInvoices: {
      screen: InvoiceScreen,
      navigationOptions: {
        headerTitle: 'Tenant Invoices',
      },
    },
    PaymentHistory: {
      screen: PaymentScreen,
      navigationOptions: {
        headerTitle: 'Payment History',
      },
    },
  }
);

const DrawerNavigator = createDrawerNavigator(
  {
    Login: {
      screen: LoginScreen,
      navigationOptions: {
        title: 'Login',
      },
    },
    Business: BusinessStack
  },
  {
    initialRouteName: 'Login',
    contentComponent: Sidebar,
    contentOptions: {
      activeTintColor: '#000000',
      activeBackgroundColor: '#e6e6e6',
    },
    itemsContainerStyle: {
      marginTop: 55,
    },
  },
);

const AppNavigator = createAppContainer(DrawerNavigator);

export default {
  components: {AppNavigator},
};
</script>

内容的提问来源于stack exchange，提问作者Usama Altaf