如何从 react 本机导航中的标题按钮导航到新页面

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.

因此，我已经在堆栈导航器中导入，如下所示：

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 的评论，props 在static方法/属性中不可用。但是，navigationOptions 将采用使用navigation的回调函数：

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

但是，与其将导航传递到组件中，不如建议这样做：

不使用导航道具进行导航