React Navigation中this.props.navigation未定义，自定义Header跳转失效求助

看起来你遇到的核心问题是自定义Header组件里的navigation.navigate没生效，其他页面能正常跳转说明路由配置没问题，那大概率是navigation prop没有正确传递给MainHeader组件，或者事件绑定的小问题导致this指向不对，咱们一步步来解决：

第一步：确认navigation prop正确传递给MainHeader #

你的MainHeader是自定义组件，不是React Navigation自带的Screen组件，所以它不会自动获得navigation prop。你需要在使用MainHeader的父组件里，手动把navigation传进去：

比如在父组件的render中：

<MainHeader navigation={this.props.navigation} />

如果你的父组件本身也没有navigation prop（比如它不是一个路由页面），可以用React Navigation提供的withNavigation高阶组件包裹MainHeader，让它自动获取navigation：

先导入withNavigation：

import { withNavigation } from 'react-navigation';

然后修改组件导出语句：

export default withNavigation(MainHeader);

这样不管MainHeader在哪里使用，都能拿到navigation prop了。

第二步：优化事件绑定方式（避免this指向错误） #

你现在在render里用this.pressSearch.bind(this)，虽然能绑定this，但每次render都会创建新函数，不仅有性能损耗，也可能引发奇怪的问题。推荐两种更稳妥的方式：

方式1：构造函数内绑定 #

export default class MainHeader extends React.Component {
  constructor(props) {
    super(props);
    // 在这里绑定this，仅执行一次
    this.pressSearch = this.pressSearch.bind(this);
  }

  pressSearch() {
    this.props.navigation.navigate('Login');
  }

  // ... 其他代码
}

方式2：使用箭头函数定义方法 #

箭头函数会自动绑定当前组件的this，无需手动bind：

export default class MainHeader extends React.Component {
  // 用箭头函数定义方法
  pressSearch = () => {
    this.props.navigation.navigate('Login');
  }

  render () {
    return(
      <Header style={{paddingTop:25}}>
        {/* ... 其他代码 */}
        <TouchableOpacity style={styles.headerButton} onPress={this.pressSearch} >
          <Icon name={'search'} />
        </TouchableOpacity>
        {/* ... 其他代码 */}
      </Header>
    )
  }
}

第三步：验证navigation是否存在 #

可以在pressSearch里加个日志，确认this.props.navigation是不是undefined：

pressSearch = () => {
  console.log('navigation:', this.props.navigation);
  this.props.navigation?.navigate('Login'); // 用可选链避免报错
}

如果打印结果是undefined，那肯定是第一步的传递问题没解决，重点检查navigation的传递逻辑。

关于你提到的PureComponent，你的MainHeader继承自React.Component而非React.PureComponent，所以不会因为PureComponent的浅比较导致props不更新的问题，暂时不用考虑这个点~

按照上面的步骤调整后，应该就能正常跳转了。

内容的提问来源于stack exchange，提问作者Onur 艦ahal