React Native新手求助：获取相册选中视频URI时触发undefined is not an object (evaluating 'props.route.params.source')错误

Let's work through this issue step by step, starting with the most obvious mistake that's causing your error:

1. Fix the Typo in AddProductScreen #

The immediate root of your error is a spelling mistake when accessing route parameters. You wrote props.route.prams.source instead of props.route.params.source (you missed an 'a' in "params").

Update your AddProductScreen code to correct this:

import { View, Text } from 'react-native'
import React from 'react'

export default function AddProductScreen(props) {
  // Fixed typo from "prams" to "params"
  const videoSource = props.route.params?.source;
  console.log(videoSource);
  return (
    <View>
      <Text>AddproductScreen</Text>
      {/* Optional: Display the URI only if it exists */}
      {videoSource && <Text>Selected Video URI: {videoSource}</Text>}
    </View>
  )
}

2. Add Safety Checks for Optional Parameters #

Even after fixing the typo, there's a edge case to handle: if someone navigates directly to AddProductScreen (not from CameraScreen), props.route.params will be undefined, which would trigger the same error again. Use optional chaining (?.) to safely access the parameter:

// Safely access source without breaking if params is undefined
const videoSource = props.route?.params?.source;

3. Verify Navigation Screen Name Match #

Double-check that the screen name you use in navigation.navigate matches exactly how you registered AddProductScreen in your navigation stack. For example, if your stack navigator is set up like this:

<Stack.Screen name="AddProduct" component={AddProductScreen} />

Then your existing navigation.navigate('AddProduct', {source : result.uri}) is correct. If the registered screen name is different (like AddProductScreen), update the navigate call to match.

4. Fix the Missing generateThumbnail Function (Optional but Critical) #

In your CameraScreen's pickFromGallery function, you call await generateThumbnail(result.uri) but haven't defined this function yet. This will throw an error once you resolve the initial issue. Add this function to your CameraScreen component:

const generateThumbnail = async (videoUri) => {
  try {
    const { uri } = await VideoThumbnails.getThumbnailAsync(videoUri);
    return uri;
  } catch (error) {
    console.warn('Failed to generate thumbnail:', error);
    return null;
  }
};

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