this.props.navigation.navigate() is undefined

Question

我像这样使用createStackNavigator。

const ChatStack = createStackNavigator({
Profiles: Profiles,
ChatScreen: ChatScreen
})
const RootChatStack = createStackNavigator({
Home: ChatStack,
ModalScreen: ProfileModalScreen
},{
mode: 'modal',
headerMode: 'none',
})

在Profiles中，我使用props.navigation.navigate('ChatScreen',{name: item.content })转到ChatScreen。

和在ChatScreen

class Example extends React.Component {
static navigationOptions = ({navigation}) => {
return {
title: navigation.getParam('name', ''),
};
...
renderModal() {
this.props.navigation.navigate('ModalScreen')
}
...
}

我可以使用navigationOptions设置标题，但当我使用这个.renderModal((时，它给了我错误

undefined is not an object (evaluating '_this2.props.navigation')

如何在示例组件中使用navigation.navigation？

Answer 1

如果使用基于class的react组件，则必须将组件中的其他函数绑定到实例。您可以通过将this显式绑定到组件中的每个附加函数来实现这一点(像render()这样的反应函数已经绑定(。

这是下面片段中的关键行：this.renderModal = this.renderModal.bind(this);

class Example extends React.Component {
constructor(props) {
super(props);
this.renderModal = this.renderModal.bind(this);
}
renderModal() {
this.props.navigation.navigate('ModalScreen');
}
...
}