React Native调用navigation.navigate报错：undefined is not an object

核心问题 #

你遇到的错误是因为错误地将整个props对象存入了state，导致navigation变量实际是包含navigation属性的外层对象，而非真正的导航对象。从控制台输出可以看到，打印的navigation是{"navigation": {...}}，所以你调用navigation.navigate时，实际是在访问外层对象的navigate属性——这当然不存在，真正的导航函数是navigation.navigation.navigate。

另外，完全没必要用useState存储导航对象，React Navigation会自动向屏幕组件传递navigation props，直接使用即可。

修复步骤 #

1. 正确解构导航props #

修改组件定义，直接从props中解构出navigation：

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
// 导入你的LocationAndPriceCard组件

const TrackerSettings = ({ navigation }) => { // 直接解构navigation
  const [selected, setSelected] = useState(null);

  const handleSelected = (value) => {
    setSelected(value);
    console.log(value);
    console.log(navigation); // 现在会打印真正的导航对象
    navigation.navigate("Tracker"); // 正常调用navigate
  };

  return (
    <View style={styles.container}>
      <Text style={styles.locationDesc}>Choose a location:</Text>
      <View style={styles.buttonRow}>
        <LocationAndPriceCard
          title="1"
          onPress={handleSelected}
          value={selected}
        />
        <LocationAndPriceCard
          title="2"
          onPress={handleSelected}
          value={selected}
        />
      </View>
      <View style={styles.buttonRow}>
        <LocationAndPriceCard
          title="3"
          onPress={handleSelected}
          value={selected}
        />
        <LocationAndPriceCard
          title="4"
          onPress={handleSelected}
          value={selected}
        />
      </View>
    </View>
  );
};

export default TrackerSettings;

2. 非屏幕组件的处理（可选） #

如果TrackerSettings不是直接注册在导航器中的屏幕组件（比如是某个屏幕的子组件），则需要使用useNavigation钩子来获取导航对象：

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

const TrackerSettings = () => {
  const navigation = useNavigation(); // 使用钩子获取导航对象
  // ... 其余代码不变
};

原代码出错的深层原因 #

• 你用useState(input)把整个props对象存入了navigation变量，而props对象的结构是{ navigation: 真正的导航对象 }，所以navigation.navigate自然不存在。
• 导航对象是React Navigation传递的稳定props，不需要存入state，直接使用即可避免引用问题。

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