React Native：播放视频错误组件异常

Posted 2023-03-15

【中文标题】React Native：播放视频错误组件异常

【英文标题】：React Native: play video error Component Exception

【发布时间】：2020-12-01 07:40:00

【问题描述】：

import  SafeAreaView, ScrollView, StyleSheet, View, Text  from 'react-native';
import React from 'react';
import  NavigationContainer  from '@react-navigation/native';
import  createStackNavigator  from '@react-navigation/stack';
import  Container, Content, List, ListItem  from 'native-base';
import Video from 'react-native-video';


function VideoListScreen( navigation ) 
  return (
    <Container>
      <Content>
        <List>

          <ListItem onPress=()=> navigation.navigate('Video Player', 
            external: true,
            videoURL: 'https://www.w3schools.com/html/mov_bbb.mp4'
          )>
            <Text>External video source</Text>
          </ListItem>

        </List>
      </Content>
    </Container>
  );


function VideoPlayerScreen( route, navigation ) 
  const external, videoURL  = route.params;

  return (
    <Container>
      <Video 
        source=uri: videoURL   // Can be a URL or a local file.                                
        style=styles.backgroundVideo 
      />                                      
    </Container>
  );


const Stack = createStackNavigator();

export default function App() 
  return (
   <NavigationContainer>
     <Stack.Navigator>
       <Stack.Screen name ='Video List' component=VideoListScreen />
       <Stack.Screen name ='Video Player' component=VideoPlayerScreen />
     </Stack.Navigator>
   </NavigationContainer>

  );

我想在用户点击列表中的项目时播放视频，但现在我收到错误 -> 组件异常，未定义不是对象（评估“RTCVideoInsance.Constants”），

这是我使用https://github.com/react-native-video/react-native-video的视频播放器库。

感谢您的帮助

【参考方案1】：

在yarn install 之后在 cd ios 中运行pod install

来源：https://github.com/react-native-video/react-native-video/issues/1502

如果您已经安装了 pod，请尝试清理 xcode 项目，然后重新构建。

【讨论】：

我正在使用 expo，没有单独的 Xcode 项目

【参考方案2】：

如果使用 expo 开发，这将有所帮助

1)。博览会安装博览会-av

2)。你的 App.js 应该是这样的。

import React from 'react';
import  StyleSheet, Text, View  from 'react-native';
import  Video  from 'expo-av';

export default class App extends React.Component 
render()
return (
< View style=styles.container >
< Text >Open up App.js to start working on your app!< / Text >

    < Video
    source= uri: 'https://www.yourdomain.com/uploads/video_file.mp4' 
    shouldPlay
    useNativeControls 
    style= width: "100%", height: "50%" 
  />

  </ View >
);


const styles = StyleSheet.create(
container: 
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
,
);

3)。然后博览会开始