将React Navigation传递给子组件的子组件时遇报错问题

我之前也遇到过类似的困扰，结合React Navigation的最佳实践，给你几个可行的解决方案：

1. 确认Screen已在导航器中注册 #

首先要确保你的screen组件已经正确注册到导航器（比如Stack/Tab/Drawer Navigator）的路由栈中。只有被导航器直接管理的组件才能自动获取navigation props，如果你的screen是嵌套在其他非导航组件内部，肯定拿不到这个props，这时候就得用下面的方法手动注入导航实例。

2. 用高阶组件withNavigation包裹子组件 #

如果你用的是类组件，最省心的方式是用withNavigation高阶组件包裹你的Button组件，这样它就能直接访问navigation props，不用手动层层传递：

// 导入高阶组件（注意React Navigation版本，v5+从@react-navigation/native导入）
import { withNavigation } from '@react-navigation/native';

class CustomButton extends React.Component {
  render() {
    return (
      <TouchableOpacity 
        onPress={() => this.props.navigation.navigate(this.props.navigationURL)}
      >
        <Text>{this.props.label}</Text>
      </TouchableOpacity>
    );
  }
}

// 用withNavigation包裹后导出
export default withNavigation(CustomButton);

这样不管Button嵌套多少层，都能直接拿到navigation，不用再从Row组件传递。

3. 函数组件用useNavigation钩子 #

如果你的组件是函数式的，直接用React Navigation提供的useNavigation钩子更简洁：

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

const CustomButton = ({ navigationURL, label }) => {
  const navigation = useNavigation();
  
  return (
    <TouchableOpacity onPress={() => navigation.navigate(navigationURL)}>
      <Text>{label}</Text>
    </TouchableOpacity>
  );
};

export default CustomButton;

4. 传递事件而非整个navigation对象 #

如果不想让子组件依赖导航器，更解耦的方式是在父screen中定义好跳转逻辑，把onPress事件作为props传递给子组件，而不是传递整个navigation：

// 父Screen组件中
class HomeScreen extends React.Component {
  handleButtonPress = (targetURL) => {
    this.props.navigation.navigate(targetURL);
  };

  render() {
    // 假设你的按钮配置数组是这样的
    const buttonRows = [
      [{ label: '页面1', url: 'Screen1' }, { label: '页面2', url: 'Screen2' }],
      [{ label: '页面3', url: 'Screen3' }]
    ];

    return (
      <View>
        {buttonRows.map((rowButtons, index) => (
          <Row 
            key={index} 
            buttons={rowButtons} 
            onButtonPress={this.handleButtonPress} 
          />
        ))}
      </View>
    );
  }
}

// Row组件中
const Row = ({ buttons, onButtonPress }) => {
  return (
    <View style={{ flexDirection: 'row' }}>
      {buttons.map((btn, idx) => (
        <CustomButton 
          key={idx} 
          label={btn.label} 
          onPress={() => onButtonPress(btn.url)} 
        />
      ))}
    </View>
  );
};

// Button组件中
const CustomButton = ({ label, onPress }) => {
  return (
    <TouchableOpacity onPress={onPress}>
      <Text>{label}</Text>
    </TouchableOpacity>
  );
};

这种方式让子组件只负责UI渲染，跳转逻辑完全由父Screen控制，更符合组件职责分离的原则。

5. 检查props传递的正确性 #

如果你坚持要手动传递navigation，一定要检查传递路径是否正确：

• 在Screen中渲染Row时：<Row navigation={this.props.navigation} />
• 在Row中渲染Button时：<Button navigation={this.props.navigation} />
  确保每一层的props名称都是navigation，没有拼写错误或者传成其他变量名。

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