React Navigation (V3): Как установить функцию навигации в файле нестандартного маршрутизатора?

Question

У меня есть Router.js, чтобы настроить все мои компоненты с реагированием-навигацией.

Когда я нажимаю компонент FloorScreen headerRight кнопка покажет предупреждение о щелчке.

Теперь я хочу изменить это как this.props.navigation.navigate.goBack();

Router.js:

import React, { Component } from 'react';
import { Image, TouchableOpacity } from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';

// and import some screen...

    const Router = createStackNavigator({
      WelcomeScreen: {
        screen: WelcomeScreen,
        navigationOptions: () => ({
          header: null
        }),
      },
      HomeScreen: {
        screen: HomeScreen
      },
      FloorScreen: {
        screen: FloorScreen,
        navigationOptions: {
          drawerLabel: 'test',
          headerStyle: {
            backgroundColor: commonColor.appBackgroundColor,
          },
          headerRight: (
            <TouchableOpacity onPress={() => alert('click')}>
            <Image style={{ width: 20, height: 20}} source={BackIcon} />
            </TouchableOpacity>
          )
        }
      }
    },
    {
      initialRouteName: 'WelcomeScreen',
      headerMode: 'screen'
    });

    export default createAppContainer(Router);

Я знаю, что могу установить код в FloorScreen.js для его достижения:

static navigationOptions = ({ navigation }) => ({
        headerRight : (
            <TouchableOpacity onPress={() => { navigation.goBack() }}>  
               <Image />
            </TouchableOpacity>
        ),
    });

Можно ли установить код в моем Router.js? Или установить код в FloorScreen.js - это единственный способ сделать это?

Буду признателен за любую помощь.

Answer 1

Вы можете реализовать его в navigationOption

navigationOptions: () => ({
              tabBarLabel: strings.labelJobs,
              tabBarIcon: ({ tintColor }) => (
                <Icon type="FontAwesome" name="someName" />
              ),
              tabBarOnPress: ({ navigation, defaultHandler }) => {
                if (navigation.state.index > 0) {
                  navigation.dispatch(StackActions.popToTop());
                }
                defaultHandler();
              }
            })

Выше показано, как отобразить первый экран стека, просто чтобы показать вам, как вы можете получить доступ к navigation в navigationOptions* 1007.*