时间戳

首页 > 解决方案 > this.props.navigation.navigate() 未定义

react-native - this.props.navigation.navigate() 未定义

问题描述

我正在使用这样的 createStackNavigator。

const ChatStack = createStackNavigator({
  Profiles: Profiles,
  ChatScreen: ChatScreen
})

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

在我props.navigation.navigate('ChatScreen',{name: item.content })用来访问 ChatScreen 的个人资料中。

并在聊天屏幕中

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

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

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

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

标签： react-native

解决方案

如果您使用class基于反应的组件，则必须将组件中的其他功能绑定到实例。您可以通过显式绑定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');
  }

  ...
 }

推荐阅读