React Native引入Expo Video组件报错：type无效问题排查

错误原因 #

你在Video.js中错误使用默认导入方式引入Expo Video组件，导致Video变量实际为undefined，React无法识别这个无效的组件类型，从而抛出错误。

修复步骤 #

修改Video.js中的Video导入语句：

// 原错误导入
import Video from 'expo-av'

// 修改为命名导入
import { Video } from 'expo-av'

验证其他环节 #

你的组件导入导出逻辑是正确的：

• Video.js中使用export const VideoInstance进行命名导出
• Phase2.js中使用import { VideoInstance } from '../components/Videos'进行命名导入，这部分无需修改

完整修复后的Video.js代码 #

import React from 'react'
import { View, 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'
    }
  }
)

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