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