React Native: как вернуться во внутренний StackNav при нажатии на панель вкладок из внешнего TabNav?

Я создаю приложение React Native, используя TabNavigator и StackNavigator.

  • Я использую TabNavigator на корневом уровне своего приложения React Native.
  • Каждый маршрут внутри TabNavigator сопоставляется с StackNavigator.
  • Каждый StackNavigator имеет n количество экранов.

Предположим, я нахожусь на вкладке Настройки и на 3 экрана глубже вхожу в пользовательские настройки -> способы оплаты -> кредитная карта 1.

Каждый раз, когда я нажимаю на вкладку Настройки, я хочу вернуться на один экран назад.

  • Нажмите 1: кредитная карта 1 > способы оплаты.
  • Нажмите 2: способы оплаты -> настройки пользователя.
  • Нажмите 3: настройки пользователя -> настройки.

Как я могу это сделать?


react-native stack-navigator react-navigation react-tabs tabnavigator
person Derek Soike    schedule 04.11.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Ключевым моментом является отправка правильного действия навигации внутри метода 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)
person Derek Soike    schedule 04.11.2017