React Native FlatList跳转页面报错：无法读取navigate属性

错误原因 #

navigation 对象未被正确传入 FreestyleCarousel 组件，导致调用 navigation.navigate 时触发 cannot read property 'navigate' of undefined 错误。

修复方案 #

方案1：手动传递navigation参数 #

如果 FreestyleCarousel 是作为子组件使用（而非直接注册为导航栈的屏幕），需要在父组件中显式传递 navigation prop：

// 父组件示例（如HomeScreen）
import { FreestyleCarousel, sliderData } from './你的组件路径';

export default function HomeScreen({ navigation }) {
  return (
    <FreestyleCarousel list={sliderData} navigation={navigation} />
  );
}

方案2：使用useNavigation钩子（推荐） #

无需手动传递参数，直接在组件内部通过React Navigation的useNavigation钩子获取导航实例：

import { useNavigation } from '@react-navigation/native';
// 导入其他必要组件（TouchableOpacity、FlatList等）

const FreestyleCarousel =({ list }) => {
  const navigation = useNavigation(); // 获取导航对象

  return (
    <FlatList
      data={list}
      horizontal
      snapToInterval={CARD_WIDTH_SPACING}
      decelerationRate="fast"
      showsHorizontalScrollIndicator={false}
      keyExtractor={i => i.id}
      renderItem={({item, index}) => {
        return (
          <TouchableOpacity 
            onPress={()=> navigation.navigate(item.navigateTo)}
            style={{
              marginLeft: spacing.l,
              marginRight: index === list.length - 1 ? spacing.l : 0,
            }}
          >
            <View style={[styles.card, shadow.dark]}>
              <View style={styles.imageBox}>
                <Image source={item.image} style={styles.image} />
              </View>
              <View style={styles.titleBox}>
                <Text style={styles.title}>{item.title}</Text>
              </View>
            </View>
          </TouchableOpacity>
        );
      }}
    />
  );
};

额外验证步骤 #

• 确认sliderData中navigateTo字段的屏幕名称（如FreestyleWorkoutsScreen）已在导航栈中正确注册，否则会出现"找不到屏幕"的错误。
• 检查CARD_WIDTH_SPACING、spacing、styles等全局变量是否已正确定义，避免其他渲染错误。

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