我以前见过这个问题,但通过导入/导出花括号解决它的解决方案似乎不是根本原因。
我可以尝试添加一个功能组件到我的网页React.js,该组件将包括从Expo导入的视频。它似乎导致了一个错误,我觉得它是与视频类坐在VideoInstance导致的错误,但不确定。
阶段2.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功能组件(错误在于视频,我认为运行时没有该组件且可触摸)
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)
我想让视频在Phase 2页面上呈现。但是它不能呈现。我试着把VideoInstance的代码直接放在Phase 2函数中,它工作了,所以问题一定是试图把它放进去,只是不确定是什么...
3条答案
按热度按时间cunj1qz11#
您应该在导出后写入default并选中它
wbgh16ku2#
您正在为视频组件使用错误的导入。
您将像
import Video from 'expo-av
一样导入它,当它应该是
import { Video } from 'expo-av'
时您正在导入它,就像它是默认导出的一样,但是包“expo-av”可能将它导出为命名导出,因此您应该使用命名导入。
MDN import docs
MDN export docs
rkkpypqq3#
可以在代码中更改导入。
从"expo-av"导入{视频};或尝试以下一个并导入相同的内容,如上所示
让我知道它是否有效。谢谢