底部选项卡导航器中的导航道具出现问题

Question

我正在使用这个

<View style={{flex:1}}>
{this.state.screenSwitch ? (
<Screen1/>
) : <Screen2/>}
</View>

在回报中。由于我使用它来交换底部选项卡导航器中单个选项卡中的两个屏幕，因此我正在使用

<TouchableOpacity onPress={()=> this.props.navigation.navigate('Screen3')}>

但是收到这样的错误

undefined不是一个对象(评估'_this2.props.navigation.navigate'(

那么问题出在哪里。

Answer 1

这可能是由于this变量而发生的。尝试创建一个名为self的新变量并将其放在类声明之前，并遵循以下内容：

... //imports below
import ....
//here put new variable self
let self;
// your class here
export default class YourClass extends Component {
.....
constructor() {
//your constructor fooes...
self = this;
}
.....
// and then use self instead of this in your code.
....
<TouchableOpacity onPress={()=> self.props.navigation.navigate('Screen3')}>
....

Answer 2

你能创建一个处理导航的函数并调用它

吗按如下所示

import {NavigationActions} from 'react-navigation'; 
constructor(props) {
super(props);
}
navigateToScreen = (route) => () => {
const navigateAction = NavigationActions.navigate({
routeName: route
});
this.props.navigation.dispatch(navigateAction);
}

render() {
...
<TouchableOpacity onPress={this.navigateToScreen('Screen3')} ></TouchableOpacity>
...
}