React Native：在独立组件中获取导航属性，实现通知点击跳转

嘿，这个场景太常见了！当你在处理推送通知这类跨组件事件时，确实需要让独立的功能组件拿到导航权限才能跳转页面。下面给你几个靠谱的实现方案，你可以根据自己的组件类型（类组件/函数组件）来选：

方案1：用withNavigation高阶组件（类组件专属） #

如果你的FcmHandler是类组件，react-navigation提供的withNavigation高阶组件可以直接把导航属性注入到组件的props里，不用手动层层传递。

具体步骤：

1. 先导入这个高阶组件：

import { withNavigation } from '@react-navigation/native';

2. 修改FcmHandler的导出方式，用withNavigation包裹：

class FcmHandler extends React.Component {
  // 通知被点击时的回调方法
  handleNotificationTap = () => {
    // 现在直接通过this.props.navigation就能调用导航方法了
    this.props.navigation.navigate('你的目标页面名称');
  };

  // 其他处理通知的逻辑...
}

// 关键一步：用withNavigation包裹组件后导出
export default withNavigation(FcmHandler);

方案2：用useNavigation钩子（函数组件首选） #

如果你的FcmHandler是函数组件，用React Hooks会更简洁直接：

1. 先导入钩子：

import { useNavigation } from '@react-navigation/native';

2. 在组件内部获取导航实例：

function FcmHandler() {
  const navigation = useNavigation();

  const handleNotificationTap = () => {
    // 直接用navigation对象跳转就行
    navigation.navigate('你的目标页面名称');
  };

  // 其他通知处理代码...
}

export default FcmHandler;

方案3：手动传递导航props（通用方案） #

要是你不想用高阶组件或者钩子，也可以直接从父组件把导航属性传进去。修改你的App.js：

export default class App extends React.Component { 
  render() { 
    return ( 
      <Root style={{ flex: 1 }}> 
        {/* 把当前的navigation props传递给FcmHandler */}
        <FcmHandler navigation={this.props.navigation} /> 
      </Root> 
    ) 
  } 
}

之后在FcmHandler里，不管是类组件还是函数组件，都能通过props拿到导航对象来跳转页面。

小提醒 #

• 一定要确保你的Root组件是react-navigation的导航容器（比如NavigationContainer），不然导航属性根本传不下来哦。
• 如果是在通知回调这种异步场景里触发导航，最好先确认组件已经挂载了，避免出现导航还没初始化就调用的问题。

内容的提问来源于stack exchange，提问作者Jude Fernandes