进行导航，而不用反应导航覆盖底部的标签导航

Question

我有一个具有以下结构的应用程序：

• 根（StackNavigator）
  • 详细信息屏幕
  • BottomTabNavigator
    • StackNavigator A
      • 屏幕A
      • 屏幕B
      • ...
    • StackNavigator B
      • 屏幕C
      • 屏幕D
      • ...

是否可以在不覆盖底部标签的情况下导航至详细信息屏幕？

我发现的唯一解决方法是，作为每个StackNavigator的子级，对详细信息屏幕进行delcare，但我想避免重复。

下面是一个完整的示例：

import * as React from 'react';
import { Button, Text, View, StyleSheet } from 'react-native';
import { createBottomTabNavigator, createStackNavigator, NavigationActions } from 'react-navigation';

const Btn = props => <View style={styles.btn}><Button {...props} /></View>;

class ScreenA extends React.Component {
  render() {
    return (
      <View style={styles.section}>
        <Text style={styles.txt}>
          Screen A
        </Text>
        <Btn
          title="Item detail"
          onPress={() => this.props.navigation.navigate('ItemDetail', {
            payload: 'Screen A',
          })}
        />
        <Btn
          title="Item detail in parent Nav"
          onPress={() => this.props.navigation.navigate('ItemDetailInAppNav', {
            payload: 'Screen A (in AppNav)',
          })}
        />
      </View>
    );
  }
}

class ScreenB extends React.Component {
  render() {
    return (
      <View style={styles.section}>
        <Text style={styles.txt}>
          Screen B
        </Text>
        <Btn
          title="Item detail"
          onPress={() => this.props.navigation.navigate('ItemDetail', {
            payload: 'Screen B',
          })}
        />
        <Btn
          title="Item detail in root Nav"
          onPress={() => this.props.navigation.navigate('ItemDetailInAppNav', {
            payload: 'Screen A (in AppNav)',
          })}
        />
      </View>
    );
  }
}

class ItemDetail extends React.Component {
  render() {
    const payload = this.props.navigation.getParam('payload');
    return (
      <View style={styles.section}>
        <Text style={styles.txt}>
          Item Detail
        </Text>
        <Text style={styles.txt_payload}>
          {`from ${payload}`}
        </Text>
        <Btn
          title="Back"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}

const itemDetailScreen = {
  ItemDetail: {
    screen: ItemDetail,
  }
};

const StackA = createStackNavigator({
  ScreenA: {
    screen: ScreenA,
    navigationOptions: () => ({
      header: null,
    })
  },
  ...itemDetailScreen,
},{
  initialRouteName: 'ScreenA',
});

const StackB = createStackNavigator({
  ScreenB: {
    screen: ScreenB,
    navigationOptions: () => ({
      header: null,
    })
  },
  ...itemDetailScreen,
},{
  initialRouteName: 'ScreenB',
});

const TabsNav = createBottomTabNavigator(
  {
    ScreenA: {
      screen: StackA,
    },
    ScreenB: {
      screen: StackB,
    },
  },
  {
    initialRouteName: 'ScreenA',
  }
);

const AppNav = createStackNavigator(
  {
    Tabs: {
      screen: TabsNav,
        navigationOptions: () => ({
        header: null,
      })
    },
    ItemDetailInAppNav: {
      screen: ItemDetail,
    }
  },
  {
    initialRouteName: 'Tabs',
  }
);

export default class App extends React.Component {
  render() {
    return <AppNav />;
  }
}

const styles = StyleSheet.create({
  section: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
  txt: {
    fontSize: 24,
  },
  txt_payload: {
    fontSize: 16,
  },
  btn: {
    padding: 4,
  },
});

Expo