在非 object 评估 props.route.params.source 中反应原生 undefined

Question

您好，我是 react native 的初学者，我正在尝试从 Galerie 中获取视频的 URI 并在另一个组件中使用它，我正在使用控制台日志对其进行测试，但此错误在不是 object 中出现未定义评估 props.route.params.source 这是将从画廊中挑选视频的页面：

 import React, { useEffect, useState } from 'react'
import { View, Text, TouchableOpacity, Image } from 'react-native'
import { Camera } from 'expo-camera'
import { Audio } from 'expo-av'
import * as ImagePicker from 'expo-image-picker'
import * as MediaLibrary from 'expo-media-library'
import * as VideoThumbnails from 'expo-video-thumbnails';

import { useIsFocused } from '@react-navigation/core'
import { Feather } from '@expo/vector-icons'

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

    
    
    export default function CameraScreen() {
        const [hasCameraPermissions, setHasCameraPermissions] = useState(false)
        const [hasAudioPermissions, setHasAudioPermissions] = useState(false)
        const [hasGalleryPermissions, setHasGalleryPermissions] = useState(false)
    
      
    
        const [cameraRef, setCameraRef] = useState(null)
        const [cameraType, setCameraType] = useState(Camera.Constants.Type.back)
        const [cameraFlash, setCameraFlash] = useState(Camera.Constants.FlashMode.off)
    
        const [isCameraReady, setIsCameraReady] = useState(false)
        const isFocused = useIsFocused()
    
        const navigation = useNavigation()
        useEffect(() => {
            (async () => {
                const cameraStatus = await Camera.requestCameraPermissionsAsync()
                setHasCameraPermissions(cameraStatus.status == 'granted')
    
                const audioStatus = await Audio.requestPermissionsAsync()
                setHasAudioPermissions(audioStatus.status == 'granted')
    
                const galleryStatus = await ImagePicker.requestMediaLibraryPermissionsAsync()
                setHasGalleryPermissions(galleryStatus.status == 'granted')
    
              
            })()
        }, [])
    
    
        const recordVideo = async () => {
            if (cameraRef) {
                try {
                    const options = { maxDuration: 60, quality: Camera.Constants.VideoQuality['480'] }
                    const videoRecordPromise = cameraRef.recordAsync(options)
                    if (videoRecordPromise) {
                        const data = await videoRecordPromise;
                        const source = data.uri
                        /*let sourceThumb = await generateThumbnail(source)*/
                        /*navigation.navigate('savePost', { source, sourceThumb })*/
                    }
                } catch (error) {
                    console.warn(error)
                }
            }
        }
    
        const stopVideo = async () => {
            if (cameraRef) {
                cameraRef.stopRecording()
            }
        }
    
        const pickFromGallery = async () => {
            let result = await ImagePicker.launchImageLibraryAsync({
                mediaTypes: ImagePicker.MediaTypeOptions.Videos,
                allowsEditing: true,
                aspect: [16, 9],
                quality: 1
            })
            if (!result.cancelled) {
                let sourceThumb = await generateThumbnail(result.uri)
                navigation.navigate('AddProduct', {source : result.uri})
              
            }
        }
    
       
    
        if (!hasCameraPermissions || !hasAudioPermissions || !hasGalleryPermissions) {
            return (
                <View></View>
            )
        }
    
        return (
            <View style={styles.container}>
                {isFocused ?
                    <Camera
                        ref={ref => setCameraRef(ref)}
                        style={styles.camera}
                        ratio={'16:9'}
                        type={cameraType}
                        flashMode={cameraFlash}
                        onCameraReady={() => setIsCameraReady(true)}
                    />
                    : null}
    
                <View style={styles.sideBarContainer}>
                    <TouchableOpacity
                        style={styles.sideBarButton}
                        onPress={() => setCameraType(cameraType === Camera.Constants.Type.back ? Camera.Constants.Type.front : Camera.Constants.Type.back)}>
    
                        <Feather name="refresh-ccw" size={24} color={'white'} />
                        <Text style={styles.iconText}>Flip</Text>
                    </TouchableOpacity>
    
                    <TouchableOpacity
                        style={styles.sideBarButton}
                        onPress={() => setCameraFlash(cameraFlash === Camera.Constants.FlashMode.off ? Camera.Constants.FlashMode.torch : Camera.Constants.FlashMode.off)}>
    
                        <Feather name="zap" size={24} color={'white'} />
                        <Text style={styles.iconText}>Flash</Text>
                    </TouchableOpacity>
                </View>
    
    
                <View style={styles.bottomBarContainer}>
                    <View style={{ flex: 1 }}></View>
                    <View style={styles.recordButtonContainer}>
                        <TouchableOpacity
                            disabled={!isCameraReady}
                            onLongPress={() => recordVideo()}
                            onPressOut={() => stopVideo()}
                            style={styles.recordButton}
                        />
                    </View>
                    <View style={{ flex: 1 }}>
                        <TouchableOpacity
                            onPress={() => pickFromGallery()}
                            style={styles.galleryButton}>
                            
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        )
    }

and this is the other page where I want to retrieve the video URI:

        import { View, Text } from 'react-native'
    import React from 'react'
    
    export default function AddProductScreen(props) {
       console.log(props.route.prams.source)
      return (
        <View>
          <Text>AddproductScreen</Text>
        </View>
      )
    }

Answer 1

也许是拼写错误？ 你有 console.log(props.route.prams.source) 而不是 console.log(props.route.params.source)