undefined 不是对象 '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作为带有反应导航的路线。ClassName1组件通过反应导航自动获取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);