我无法在另一页上导航。我在这个类中有默认的类代码,导航工作正常
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>
这两个类都在一个文件中。
你的问题并不完全清楚,但我猜你在ClassName2
里面使用ClassName1
(有更多组件和构造函数):
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} />
}
}
这是基于猜测,所以让我知道这是否会解决您的问题。如果是这样,我会更新您的问题,以提供更好地描述您的问题的信息:)
如果您的类包含在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);