未定义不是对象“this2.props.navigation.navigate”

Question

我无法在其他页面上导航。 我有默认课程代码 在这个类中，导航工作正常

export default class ClassName1 extends React.Component {
    constructor(props) {
        super(props);
    }
}

但是当我在下面的类上调用this.props.navigation 时，它会抛出一个错误

class ClassName2 extends React.Component {
     constructor(props) {
         super(props);
     }
}

像这样我在ClassName2中调用函数

<TouchableOpacity onPress={() => this.props.navigation.navigate("Report") }>
    <Text style={style.modalContainerText}>
         inappropriate Content
    </Text>
</TouchableOpacity>

两个类都在一个文件中。

Answer 1

你的问题并不完全清楚，但我猜你在ClassName1 内部使用ClassName2 （当然还有更多组件和构造函数）：

class ClassName1 extends React.Component {
    render() {
        return <ClassName2 />
    }
}

现在我猜你正在使用 ClassName1 作为带有 react-navigation 的路由。 ClassName1 组件通过 react-navigation 自动获取 this.props.navigation 属性。将其传递给ClassName2 元素，使其也可以调用导航，如下所示：

class ClassName1 extends React.Component {
    render() {
        return <ClassName2 navigation={this.props.navigation} />
    }
}

不过，这是基于猜测，所以如果这能解决您的问题，请告诉我。如果是这样，我会更新您的问题，以提供可以更好地描述您的问题的信息:)

Answer 2

如果您的课程包含在 StackNavigator 函数中，您将可以访问 this.props.navigation，否则您必须使用 withNavigation 函数，如下所示

使用StackNavigator的示例

import React, { Component } from 'react';
import { Button } from 'react-native';
import { StackNavigator } from 'react-navigation';

export class ClassName2 extends Component {
  render() {
    return <Button title="This will work" onPress={() => { this.props.navigation.navigate('someScreen') }} />;
  }
}

export const myStackNavigator = StackNavigator({
  myScreen: ClassName2
})

使用withNavigation的示例

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

class ClassName2 extends Component {
  render() {
    return <Button title="This will work" onPress={() => { this.props.navigation.navigate('someScreen') }} />;
  }
}

export default withNavigation(ClassName2);