RN 下视频播放器的学习笔记 react-native-video

xiaoxiao2021-02-28  10

1,主要使用了react-native-video 开源库

下面开车

react-native-video 使用方法 1.到项目根目录: npm i -S react-native-video react-native link以链接react-native-video库。 以上完成Android 平台自动链接原生库

2 ios

AppDelegate.m中添加 #import <AVFoundation/AVFoundation.h> // import - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { ... [[AVAudioSession sharedInstance] setCategory:AVAudioSessionCategoryAmbient error:nil]; // allow ... }

app.js

import Video from 'react-native-video' export default class App extends Component<Props> { render() { return ( <Video ref={(ref) => { this.video = ref }} //来自本地的MP4视频 source={require('./video/test.mp4')} //1.0表示默认速率 rate={1.0} //图片等比例缩放 resizeMode='contain' //不重复播放 repeat={true} //默认音量 volume={1.0} //样式 style={styles.container}/> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, });

中途遇到很多问题 例如RN版本问题 yarn add react-native-cli react-native init myApp –version 0.53.0 部分问题参考此大佬的博客:https://www.jianshu.com/p/7e4618edc70f

转载请注明原文地址: https://www.6miu.com/read-2350282.html

最新回复(0)