React Native：如何在外部TabNav的标签栏上按下内部StackNav？

Question

我正在使用 TabNavigator 和 StackNavigator 构建React Native应用。

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

让我们假设我在设置标签上，我在用户设置中深入了3个屏幕 - ＆gt;付款选项 - ＆gt;信用卡1 。

每次点击设置标签，我想返回一个屏幕。

• 点按1：信用卡1 - ＆gt;付款方式
• 点按2：付款选项 - ＆gt;用户设置
• 点按3：用户设置 - ＆gt;设置

我该怎么做？

Answer 1

如果你的堆栈视图的路由索引是，那么关键是在路由的tabBarOnPress方法中调度正确的导航操作不是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);

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