Как перейти на новую страницу с помощью кнопки заголовка в реагировать родной навигации

Question

У меня есть заголовок в моем компоненте, как показано ниже:

 static navigationOptions = {

        title: 'Accounts',
       headerRight:(   <OpenCamera showImageSlider={this.showImageSlider}  /> ),
      };

OpenCamera - это компонент с изображением с камеры. Файл OpenCamera выглядит следующим образом:

import React, { Component } from 'react';
import {Image, TouchableHighlight} from 'react-native';


    export default class OpenCamera extends Component {
        constructor(props){
        super(props);

        }

        render() {
            return(
                 <TouchableHighlight  onPress={() => {this.showImageSlider()}} >
                     <Image style={{  width: 30, height: 30, marginLeft:100, marginRight:50}} source={require('../../../assets/img/camera.png')} />
                 </TouchableHighlight>


            );
        }
    }

Итак,теперь, когда я нажимаю на значок камеры, я хочу перейти на новую страницу с именем ImageRecognitionScreen.

Итак, я импортировал в StackNavigator, как показано ниже:

const ServicesStack = createStackNavigator({

  ImageRecognitionScreen:ImageRecognitionScreen

}

и вмой компонент Я добавил функцию, такую ​​как

  showImageSlider = () => {
   this.props.navigation.navigate('ImageRecognitionScreen');
}

, которую я передал в заголовке, например:

  static navigationOptions = {

            title: 'Accounts',
           headerRight:(   <OpenCamera /> ),
          };

Но, когда я нажимаю на иконку, мой проект терпит неудачу, говоря:

undefined is not an object(evaluation _this.props.navigation.navigate')

Может кто-нибудь, пожалуйста, помогите мне.

Answer 1

Построение комментария @ Gaurav Roy , реквизиты недоступны в static методах / свойствах. Тем не менее, navigationOptions принимает функцию обратного вызова, которая использует navigation:

static navigationOptions = ({ navigation }) => ({
  title: 'Accounts',
  headerRight: (
    <OpenCamera navigation={navigation} showImageSlider={this.showImageSlider}  />
  ),
})

Однако вместо передачи навигации по компонентам я бы рекомендовал это вместо:

Навигация безнавигационная опора