react-navigation - 从深层链接打开应用程序后，导航回到上一屏幕

Question

我尝试在React Native应用程序中实现深层链接，但是在关闭嵌套在堆栈导航器中的视图时，我无法保持预期的后退按钮行为。我的根导航器是一个StackNavigator，它有一个带有路径＆＃39; customer＆＃39;的TabNavigator。在选项卡导航器中有四个选项卡，其中一个选项卡具有路径＆＃39; order-now＆＃39;屏幕是另一个StackNavigator。 OrderNow堆栈有3个子屏幕，如下所示：

const OrderNowTab = StackNavigator({
  Root: { screen: StoresScreen, path: 'show-stores' },
  Menu: { screen: StoreItemsScreen, path: 'show-stores/:store_id'},
  Item: { screen: ItemDetailsScreen, path: 'show-stores/:store_id/:item_id'}
});

当我通过运行adb shell am start -W -a android.intent.action.VIEW -d "mychat://mychat/customer/order-now/show-stores/some_store_id/some_item_id" com.sampleapp关注Deep Linking guides时，我会按预期进入项目详细信息屏幕，但是当我按下导航标题中的后退箭头按钮时，应用程序似乎关闭了屏幕并登陆另一个，这是刚关闭的项目（项目详细信息）的精确副本。唯一的区别是这个新的屏幕在标题中没有后退箭头按钮，给我的印象是它不应该是这个堆栈导航器的根部（按下应该是带我到StoreItemsScreen）。

为什么会发生这种情况？如何在按下后退按钮（来自导航标题或物理Android后退按钮）后显示StoreItemsScreen？

我的package.json文件的依赖项部分如下所示：

"dependencies": {
    "react": "16.0.0-alpha.12",
    "react-native": "0.48.1",
    "react-navigation": "^1.0.0-beta.11"
  },

以下是我使用的文件：

// src/App.js
import React from 'react';
import { AppRegistry, Platform } from 'react-native';
import { StackNavigator } from 'react-navigation';

const SampleApp = StackNavigator({
  Home: { screen: require('./HomeScreen') },
  CustomerTabBar: { screen: require('./customer/CustomerNavigator'), path: 'customer' },
  Chat: { screen: require('./customer/ChatScreen'), path: 'chat/:user' },
}, {mode: "modal", headerMode: "none"});

const prefix = Platform.OS == 'android' ? 'mychat://mychat/' : 'mychat://'

const MainApp = () => <SampleApp uriPrefix={prefix} />

AppRegistry.registerComponent('SampleApp', () => MainApp);

src/HomeScreen.js：

import React from 'react'
import {Text, Button, View} from 'react-native'

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Welcome',
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <Text>Hello, Chat App!</Text>
        <Button
          onPress={() => navigate('Chat', { user: 'Lucy' })}
          title="Chat with Lucy"
        />
      </View>
    );
  }
}

module.exports = HomeScreen

CustomerNavigator.js：

import { TabNavigator } from 'react-navigation';

const CustomerNavigator = TabNavigator({
  OrderNow: { screen: require('./OrderNowTab'), path: 'order-now' },
  FutureOrders: { screen: require('./FutureOrdersScreen'), path: 'future-order' },
  Bag: { screen: require('./BagScreen'), path: 'bag-tab' },
  YourOrders: { screen: require('./YourOrdersScreen'), path: 'your-orders' },
  Account: { screen: require('./AccountScreen'), path: 'your-account' },
},{
  tabBarOptions: {
    activeTintColor: '#000',
  }
})

module.exports = CustomerNavigator

OrderNowTab.js：

import React from 'react';
import {Text} from 'react-native';
import { StackNavigator } from 'react-navigation';

class StoresScreen extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    title: `Stores`,
  });
  render() {
    return (
      <Text>List of Stores</Text>
    )
  }
}

class StoreItemsScreen extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    title: `Store Items`,
  });
  render() {
    const { params } = this.props.navigation.state;
    return (
      <Text>Store Items Screen for store with id {params.store_id}</Text>
    )
  }
}

class ItemDetailsScreen extends React.Component {
  static navigationOptions = ({navigation}) => ({
    title: 'Item Details'
  })
  render() {
    const { params } = this.props.navigation.state
    return (
      <Text>Item details screen for item with id {params.item_id} and store with id {params.store_id}</Text>
    )
  }
}

const OrderNowTab = StackNavigator({
  Root: { screen: StoresScreen, path: 'show-stores' },
  Menu: { screen: StoreItemsScreen, path: 'show-stores/:store_id'},
  Item: { screen: ItemDetailsScreen, path: 'show-stores/:store_id/:item_id'}
});

module.exports = OrderNowTab

以下是目前的gif图：