React/RN深层嵌套组件触发导航的实现方式及最佳实践是什么？

你提到的逐层透传5-6层onPress的方案不是推荐的实现方式，不需要从App.tsx开始透传，甚至大多数场景下不需要做逐层props透传。

首选方案：直接使用 React Navigation 提供的上下文API #

React Navigation 本身已经基于 React Context 封装了导航对象的获取能力，只要你的组件是在<NavigationContainer>包裹的范围内，不管嵌套多少层都可以直接拿到导航对象，不需要任何props透传：

• 函数组件：使用useNavigation钩子

// 你的深层嵌套按钮组件
import { useNavigation } from '@react-navigation/native';

function DeepNestedButton() {
  const navigation = useNavigation();
  return (
    <Button 
      title="跳转页面" 
      onPress={() => navigation.navigate('TargetScreen')} 
    />
  );
}

• 类组件：使用withNavigation高阶组件包裹

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

class DeepNestedButton extends React.Component {
  render() {
    return (
      <Button 
        title="跳转页面" 
        onPress={() => this.props.navigation.navigate('TargetScreen')} 
      />
    );
  }
}
export default withNavigation(DeepNestedButton);

可选方案：必要时仅从所属屏幕层透传 #

如果你有特殊场景（比如按钮是通用组件，跳转逻辑由使用方决定，不希望组件内部耦合导航逻辑），需要透传onPress事件，也只需要从按钮所属的屏幕组件层开始透传即可：

• 屏幕组件本身自带navigation prop，你可以在屏幕层定义好跳转逻辑，再把onPress方法往下传递，不需要涉及更上层的Stack、Tab导航器组件，更不需要从App.tsx开始透传。
• 不推荐透传超过3层，中间层级过多的话优先考虑组合组件或者上下文方案，避免中间无关节点冗余维护props。

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