React Native Functional Component - Type是无效的错误——调用视频时期望是字符串或

Question

我以前见过这个问题，但通过Import/Export花括号解决它的解决方案似乎不是根本原因。

我可以尝试添加一个功能组件到我的页面React.js，该组件将包括从世博会导入的视频。这似乎会导致一个错误，我觉得这与VideoInstance内的视频类有关，导致错误，但我不确定。

Phase2.js页

import React from 'react'
import { View, StyleSheet} from 'react-native'
import { VideoInstance } from '../components/Videos'

export default function Phase2() {
return (
<View style={styles.container}>
<VideoInstance/>
</View>
)
}
const styles = StyleSheet.create(
{
container: {
flex:1,
backgroundColor: 'red',
}
}
)

Video.js功能比较(错误在于视频我认为运行没有那个和Touchable)

import React from 'react'
import { View, Text, StyleSheet, TouchableWithoutFeedback } from 'react-native'
import Video from 'expo-av'
export const VideoInstance = () => {
const video = React.useRef(null);
const [status, setStatus] = React.useState({})
const onPlayPausePress = () => {
status.isPlaying ? video.current.pauseAsync() : video.current.playAsync()
}
return (
<View>
<TouchableWithoutFeedback onPress={onPlayPausePress}>
<Video
ref={video}
style={styles.video}
source={{uri:"https://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4"}}
resizeMode='contain'
useNativeControls={false}
isLooping
shouldPlay
onPlaybackStatusUpdate={setStatus}
/>
</TouchableWithoutFeedback>  
</View>
)
}

const styles = StyleSheet.create(
{
container: {
flex:1,
backgroundColor: 'red',
},
video: {
flex: 1,
alignSelf: 'stretch'
}
}
)

**完整错误消息:* *

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite 
components) but got: %s.%s%s, undefined,  You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check the render method of `VideoInstance`., 
in VideoInstance (created by Phase2)

我希望视频在第二阶段页面上呈现。但它不会渲染。我试图把代码VideoInstance直接在Phase2函数，它的工作，所以问题必须试图把它，只是不确定什么…

Answer 1

您使用了错误的Video组件导入。

您正在导入它import Video from 'expo-av，
import { Video } from 'expo-av'

您正在导入它，就好像它是默认导出的一样，但是包'expo-av'可能将其导出为命名导出，因此您应该使用命名导入。

MDN导入文档
MDN导出文档

Answer 2

你应该写default导出后检查

export default const VideoInstance = () => {
// Your code
}

Answer 3

您可以在代码中更改import。

import {Video} from 'expo-av';或者尝试下面的一个并导入与上面相同的内容

const VideoInstance = () => {
// Your code
}

export default VideoInstance;

让我知道它是否有效。由于