React native undefined 不是评估 props.route.params.source 的对象
2022-08-19
84
您好,我是 React Native 的新手,我正在尝试获取从 Galerie 中挑选的视频的 URI 并将其用于另一个组件,我正在使用控制台日志对其进行测试,但出现此错误 未定义在非对象评估 props.route.params.source 这是从 Galerie 中挑选视频的页面:
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>
)
}
1个回答
可能是拼写错误?您写错了 console.log(props.route.prams.source) 而不是 console.log(props.route.params.source)
Luis Alberto Peña
2022-08-19