React native React Native：如何从外部选项卡导航返回选项卡栏上的内部堆栈导航？

我正在使用TabNavigator和StackNavigator构建React本机应用程序

• 我在React本机应用程序的根级别使用TabNavigator
• TabNavigator中的每个路由都映射到StackNavigator
• 每个StackNavigator有n个屏幕

假设我在设置选项卡上，在用户设置->支付选项->信用卡1中有3个屏幕

每次点击“设置”选项卡时，我都想返回一个屏幕

• 点击1：信用卡1->支付选项
• 点击2：付款选项->用户设置
• 点击3：用户设置->设置

---

如何执行此操作？

如果堆栈视图的路由索引不是0，则关键是在路由的

选项卡中分配正确的导航操作



index.js

import React, { AppRegistry } from 'react-native'
import { Component } from 'react'
import MyTabNavigator from './components/MyTabNavigator'

class MyApp extends Component {
    render() {
        return (
            <MyTabNavigator/>
        );
    }
}

AppRegistry.registerComponent('MyApp', () => MyApp);

import HomeStackNav from './HomeStackNav'
import SettingsStackNav from './SettingsStackNav'

const goBackNavigationAction = NavigationActions.navigate({
  action: NavigationActions.back()
})

const routeConfig = {
  Home: {
    screen: HomeStackNav,
    path: 'home',
    navigationOptions: {...}
  },
  Settings: {
    screen: SettingsStackNav,
    path: 'settings',
    navigationOptions: ({ navigation }) => ({
      title: 'settings',
      tabBarLabel: 'settings',
      tabBarOnPress: (scene, jumpToIndex) => {
        jumpToIndex(scene.index)
        if (scene.route.index > 0) {                  // <----- this is
          navigation.dispatch(goBackNavigationAction) // <----- where the
        }                                             // <----- magic happens
      }
    })
  }
}

const tabNavigatorConfig = {...}

export default TabNavigator(routeConfig, tabNavigatorConfig)

import React，{AppRegistry}来自“React native”
从“react”导入{Component}
从“./components/MyTabNavigator”导入MyTabNavigator
类MyApp扩展组件{
render（）{
返回(
);
}
}
AppRegistry.registerComponent（'MyApp'，（）=>MyApp）；

MyTabNavigator.js

import React, { AppRegistry } from 'react-native'
import { Component } from 'react'
import MyTabNavigator from './components/MyTabNavigator'

class MyApp extends Component {
    render() {
        return (
            <MyTabNavigator/>
        );
    }
}

AppRegistry.registerComponent('MyApp', () => MyApp);

import HomeStackNav from './HomeStackNav'
import SettingsStackNav from './SettingsStackNav'

const goBackNavigationAction = NavigationActions.navigate({
  action: NavigationActions.back()
})

const routeConfig = {
  Home: {
    screen: HomeStackNav,
    path: 'home',
    navigationOptions: {...}
  },
  Settings: {
    screen: SettingsStackNav,
    path: 'settings',
    navigationOptions: ({ navigation }) => ({
      title: 'settings',
      tabBarLabel: 'settings',
      tabBarOnPress: (scene, jumpToIndex) => {
        jumpToIndex(scene.index)
        if (scene.route.index > 0) {                  // <----- this is
          navigation.dispatch(goBackNavigationAction) // <----- where the
        }                                             // <----- magic happens
      }
    })
  }
}

const tabNavigatorConfig = {...}

export default TabNavigator(routeConfig, tabNavigatorConfig)

从“./HomeStackNav”导入HomeStackNav
从“./SettingsStackNav”导入设置sStackNav
const goBackNavigationAction=NavigationActions.navigate({
操作：NavigationActions.back（）
})
常数routeConfig={
主页：{
屏幕：HomeStack导航，
路径：“家”，
导航选项：{…}
},
设置：{
屏幕：设置StackNav，
路径：“设置”，
导航选项：（{navigation}）=>({
标题：“设置”，
tabBarLabel:“设置”，
tabBarOnPress：（场景，跳转索引）=>{
jumpToIndex（场景索引）
如果（scene.route.index>0）{//