Параметры не передаются и навигатор недоступен в createStackNavigator - реагировать на навигацию

Question

Я использую React Navigation в моем приложении. Я создал createStackNavigator с createBottomTabNavigator в заголовке. Я пытаюсь получить доступ к параметрам, которые я передаю с экрана, но эти параметры недоступны. И я также хочу, чтобы когда кто-то нажимал на кнопку «Заголовок», затем переходил на новый экран, но проблема в том, что функция «navigation.navigator ()» недоступна в кнопках заголовка.

Вот как выглядит моя Nav. js:

import React from 'react';
import {View, Text, Button} from 'react-native';
import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';

import Screen1 from './Screen1';
import Screen2 from './Screen2';
import Screen3 from './Screen3';

const bottomTab = createBottomTabNavigator(
  {
    openOrder: Screen1,
    closeOrder: Screen2
  }
);

const mainNav = createStackNavigator({
  order: {
    screen: bottomTab,
    navigationOptions: ({navigation}) => ({
      headerRight: (
        <View>
          <Button title="Map" onPress={() => console.log(navigation)} />
        </View>
      )
    })
  },
  map: Screen3
});

export default createAppContainer(mainNav);

Screen1. js

import React, { useEffect } from 'react';
import { View, Text } from 'react-native';

const Screen1 = props => {
  useEffect(() => {
    props.navigation.setParams({
      title: 'Some Content',
      map: mapit,
    });
  }, []);

  const mapit = () => {
    console.log('Map it function');
  };

  return (
    <View>
      <Text>Screen 1</Text>
    </View>
  );
};

export default Screen1;

Screen2. js

import React from 'react';
import {View, Text} from 'react-native';

const Screen2 = () => {
  return(
    <View>
      <Text>Screen 2</Text>
    </View>
  );
}

export default Screen2;

Screen3. js

import React from 'react';
import {View, Text} from 'react-native';

const Screen3 = () => {
  return(
    <View>
      <Text>Screen 3</Text>
    </View>
  );
}

export default Screen3;

Вот Закуска

Answer 1

Вы можете решить эту проблему, создав кнопку с функцией навигации.

withNavigation - это компонент более высокого порядка, который пропускает реквизит navigation в упакованный компонент. Это полезно, когда вы не можете передать navigation реквизит непосредственно в компонент или не хотите передавать его в случае глубоко вложенного потомка.

Exmaple

import React from 'react';
import { Button } from 'react-native';
import { withNavigation } from 'react-navigation';

class MyMoveButton extends React.Component {
  render() {
    return (
      <Button
        title="map"
        onPress={() => {
          this.props.navigation.navigate("map");
        }}
      />
    );
  }
}

// withNavigation returns a component that wraps MyBackButton and passes in the
// navigation prop
export default withNavigation(MyMoveButton);

Использование

import MyMoveButton from "path for MyMoveButton"
...

headerRight: (
        <View>
          <MyMoveButton />
        </View>
      )