React Native导航报错：Undefined is not an object (evaluating 'navigation.navigate')

错误原因 #

1. useNavigation是React Hook，只能在函数组件或自定义Hook中使用，你的Following是类组件，直接用它根本获取不到有效的navigation对象。
2. renderItem方法的参数只有{item, index, separators}，你错误地把navigation当成参数传入，这个参数实际上不存在，所以调用navigation.navigate时会报undefined。

解决方案一：父组件传navigation给类组件（最直接适配） #

步骤1：在父组件FollowingScreen中传入navigation #

修改App.js里的FollowingScreen，把拿到的navigation传给Following组件：

export const FollowingScreen = ({route, navigation}) => {
return (
    <ScrollView style={styles.scrollView}>
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: "#262423" }}>
       <Following navigation={navigation} /> {/* 新增：传入navigation */}
      </View>
    </ScrollView>
  );
}

步骤2：在Following类组件中通过props获取并使用 #

删掉类组件里的useNavigation引入，通过this.props.navigation调用跳转：

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

class Following extends Component {
  // ...其他原有代码

  renderItem = ({item}) => ( // 移除多余的navigation参数
    <ListItem bottomDivider>
      <ListItem.Content style={{width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
        <ListItem.Title>{item.title}</ListItem.Title>
        <TouchableOpacity 
          onPress={() => this.props.navigation.navigate("ProfileScreen", {userInfo: {uri: item.probability, username: item.country_id, id_user: item.id_user}})} 
          style={{ flexDirection: 'row'}}
        >
          <Image
            style={{ borderRadius: 50 }}
            source={{ uri: item.probability, width: 48, height: 48 }}
          />
        </TouchableOpacity>
        <TouchableOpacity 
          onPress={() => this.props.navigation.navigate("ProfileScreen", {userInfo: {uri: item.probability, username: item.country_id, id_user: item.id_user}})} 
          style={{ flexDirection: 'row'}}
        >
          <ListItem.Subtitle style={{color: '#000'}}>
            <Text style={{fontFamily: 'Montserrat_600SemiBold' }}>{item.name} {item.surname}</Text>
            {"\n"}
            <Text style={{fontFamily: 'Montserrat_600SemiBold' }}>@{item.country_id}</Text>
            {"\n"}
            {"\n"}
            <Text style={{fontFamily: 'Montserrat_600SemiBold' }}>{item.followers}</Text>
            {"\n"}
            <Text style={{fontFamily: 'Montserrat_600SemiBold' }}>{item.total}</Text> Total
          </ListItem.Subtitle>
        </TouchableOpacity>
        {/* ...原有按钮代码不变 */}
      </ListItem.Content>
    </ListItem>
  );
}

解决方案二：将类组件改为函数组件（推荐适配React Navigation生态） #

把Following改成函数组件，直接使用useNavigation Hook：

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

// 替换原有类组件为函数组件
const Following = () => {
  const navigation = useNavigation(); // 正确获取navigation对象

  // 原有follow方法改为函数内部定义
  const follow = (userId) => {
    // 你的follow逻辑代码
  };

  // 原有unfollow方法改为函数内部定义
  const unfollow = (userId) => {
    // 你的unfollow逻辑代码
  };

  const renderItem = ({item}) => (
    <ListItem bottomDivider>
      <ListItem.Content style={{width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
        <ListItem.Title>{item.title}</ListItem.Title>
        <TouchableOpacity 
          onPress={() => navigation.navigate("ProfileScreen", {userInfo: {uri: item.probability, username: item.country_id, id_user: item.id_user}})} 
          style={{ flexDirection: 'row'}}
        >
          <Image
            style={{ borderRadius: 50 }}
            source={{ uri: item.probability, width: 48, height: 48 }}
          />
        </TouchableOpacity>
        <TouchableOpacity 
          onPress={() => navigation.navigate("ProfileScreen", {userInfo: {uri: item.probability, username: item.country_id, id_user: item.id_user}})} 
          style={{ flexDirection: 'row'}}
        >
          <ListItem.Subtitle style={{color: '#000'}}>
            <Text style={{fontFamily: 'Montserrat_600SemiBold' }}>{item.name} {item.surname}</Text>
            {"\n"}
            <Text style={{fontFamily: 'Montserrat_600SemiBold' }}>@{item.country_id}</Text>
            {"\n"}
            {"\n"}
            <Text style={{fontFamily: 'Montserrat_600SemiBold' }}>{item.followers}</Text>
            {"\n"}
            <Text style={{fontFamily: 'Montserrat_600SemiBold' }}>{item.total}</Text> Total
          </ListItem.Subtitle>
        </TouchableOpacity>
        <Button
          buttonStyle={{backgroundColor: "#a6aba7", padding: 9, textAlign: "right", borderRadius: 10, display: item.isFollowing=="Same user" ? "none" : "flex"}}
          title={item.isFollowing}
          onPress={() => {
            if(item.isFollowing=="Follow"){
              follow(item.id_user); // 直接调用函数，去掉this
            }
            else if(item.isFollowing=="Unfollow"){
              unfollow(item.id_user);
            }
            else if(item.isFollowing=="Same user"){
              //alert("Same user");
            }
          }}
        />
      </ListItem.Content>
    </ListItem>
  );

  // 返回你的组件渲染内容（比如FlatList等）
  return (
    // 原有render里的内容，例如：
    // <FlatList data={yourData} renderItem={renderItem} ... />
  );
};

export default Following;

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