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

Question

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.

感谢的帮助

Answer 1

yarn安装后在cd ios中运行pod安装

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

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

Answer 2

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

1( 。expo安装expo 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( 。然后博览会开始