React Native报错：无法找到变量"navigation"的解决方法

报错核心原因 #

你定义的自定义组件AppButton内部作用域里不存在navigation变量。
navigation是React Navigation自动注入到直接注册的屏幕组件的专属prop，你把navigation.navigate的调用直接硬编码在了独立通用按钮组件内部，既没有给这个组件传navigation值，也没有把导航逻辑通过prop回调传递进去，自然触发变量找不到的报错。
另外你父组件App虽然从props中解构到了navigation，但给AppButton传值时完全没有绑定对应的点击跳转逻辑，是触发报错的叠加原因。

具体修复步骤 #

• 解耦自定义按钮的事件逻辑：移除AppButton内部硬编码的导航调用，让按钮只负责接收外部传入的点击回调，同时兼容之前传入但未生效的backgroundColor动态样式
  调整后的AppButton代码：

  const AppButton = ({ onPress, title, backgroundColor }) => (
    <TouchableOpacity
      onPress={onPress}
      style={[styles.appButtonContainer, { backgroundColor: backgroundColor }]}
    >
      <Text style={styles.appButtonText}>{title}</Text>
    </TouchableOpacity>
  );
  

• 在屏幕组件中绑定导航逻辑：在能拿到navigation的父组件App里，把跳转SignInScreen的逻辑作为回调传给AppButton的onPress属性
  调整后的App组件代码：

  const App = ({ navigation }) => {
    return (
      <View style={styles.screenContainer}>
        <AppButton 
          title="Register" 
          size="sm" 
          backgroundColor="#007bff" 
          onPress={() => navigation.navigate("SignInScreen")}
        />
      </View>
    );
  };
  

补充说明 #

• 后续如果需要在深层嵌套子组件中直接调用导航，不需要逐层传递props，可以使用React Navigation提供的useNavigation hook在组件内部直接获取导航对象，减少冗余传值
• 原有样式表中硬编码的按钮背景色#009688会覆盖传入的动态色值，本次修复动态样式绑定后，你传入的#007bff蓝色注册按钮即可正常显示。

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