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

Question

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

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

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

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

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

我怎样才能做到这一点？

Answer 1

如果您的stack view的路由索引不为 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)