React Native：如何从外部 TabNav 在标签栏按下时导航回内部 StackNav？答案

【问题标题】：React Native: How to navigate back in inner StackNav on tab bar press from outer TabNav?React Native：如何从外部 TabNav 在标签栏按下时导航回内部 StackNav？
【发布时间】：2018-04-16 19:48:54
【问题描述】：

我正在使用 TabNavigator 和 StackNavigator 构建一个 React Native 应用程序。

我在我的 React Native 应用程序的根级别使用 TabNavigator。
TabNavigator 中的每条路由都映射到一个StackNavigator。
每个 StackNavigator 都有 n 个屏幕。

假设我在设置选项卡上，并且在用户设置 -> 支付选项 -> 信用卡 1 中深入了 3 个屏幕。

每次我点击设置选项卡我都想返回一个屏幕。

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

我该怎么做？

【问题讨论】：

标签： react-native react-navigation tabnavigator stack-navigator react-tabs

【解决方案1】：

如果您的 堆栈视图 的路由索引不为 0，则关键是在路由的 tabBarOnPress 方法内调度正确的 导航操作。

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);

MyTabNavigator.js

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)

【讨论】：