安装
```
npm install react-native-rtmpview --save
or yarn add react-native-rtmpview --save
```
找到ios目录下的Podfile文件，添加如下代码
```
pod 'react-native-rtmpview', :path => '../node_modules/react-native-rtmpview'
```
官网中说添加三个，自己先查看Podfile里面是不是已经有了
pod 'Yoga', path: '../node_modules/react-native/ReactCommon/yoga/Yoga.podspec'
pod 'React', path: '../node_modules/react-native'
这两个，没有则自己添加
执行pod install，使用组件的时候要注意给RtmpView宽高
```
import { RtmpView }from 'react-native-rtmpview';
<RtmpView style={styles.player}
shouldMute={false}
playOnResume={false}
pauseOnStop={true}
onLoadState={(data) => {
this.handleLoadState(data);
}}
ref={e => {this.player = e; }}
url="rtmp://58.200.131.2:1935/livetv/hunantv" />
```
效果图如下，链接是湖南卫视，一些链接可以自己找，也可以自己在官网中复制example中的index.js代码自己修改测试
页面代码
```
// /*
// *设备管理
// * */
import React, {Component}from 'react';
import {
View,
Text,
StyleSheet,
Image,
TouchableOpacity
}from 'react-native'
import Util from '../common/util'
import Headerfrom '../common/header'
import { RtmpView }from 'react-native-rtmpview';
import Loadingfrom 'react-native-easy-loading-view';
import storage from "../common/storage";
import TcpSocket from "react-native-tcp-socket";
import exchangeBasicfrom "../common/exchangeBasic";
import clientfrom "../common/client";
export default class deviceManagerextends Component{
constructor(props,context) {
super(props, context);
this.player =null;
this.state = {
token:'',
userID:'',
time:'',
isShowVideo:false
};
}
componentDidMount() {
Loading.showHud('直播加载中...',)
this.getCurrentTime()
this.player.initialize();
storage.load({
key:'userID',
autoSync:true,
syncInBackground:true,
syncParams: {
extraFetchOptions: {
},
someFlag:true
}
}).then(res => {
// exchangeBasic.log("userID",res);
this.setState({
userID:res.userID
})
})
.catch(err => {
exchangeBasic.log(err.message);
switch (err.name) {
case 'NotFoundError':
break;
case 'ExpiredError':
break;
}
});
storage.load({
key:'token',
autoSync:true,
syncInBackground:true,
syncParams: {
extraFetchOptions: {
},
someFlag:true
}
}).then(res => {
// exchangeBasic.log("token",res);
this.setState({
token:res.token
})
})
.catch(err => {
exchangeBasic.log(err.message);
switch (err.name) {
case 'NotFoundError':
break;
case 'ExpiredError':
break;
}
});
}
handleLoadState(data) {
Loading.dismiss(); // 加载状态消失
this.setState({
isShowVideo:true
})
}
//当前时间
getCurrentTime(){
let timestamp =new Date().getTime()
let time =Util.transformToDate(timestamp)
this.setState({
time:time
})
this.timerInterval()
}
timerInterval(){
let that =this
this.timer =setInterval(function () {
let timestamp =new Date().getTime()
let time =Util.transformToDate(timestamp)
that.setState({
time:time
})
},1000)
}
//图文导入
selectGoods(){
this.props.navigation.push('SelectPrintProduct2')
storage.save({
key:'userInfo',
data: {
token:this.state.token,
userID:this.state.userID,
},
});
}
render(){
return(
<View style={{flex:1,backgroundColor:"#fff"}}>
<Header navigation={this.props.navigation}bgColor={"#fe2500"}fontColor={'#fff'}title={'设备名称'}hideBack={true}/>
<View style={{flex:1,padding:15,justifyContent:'space-between'}}>
ref={(view)=>{Loading.loadingDidCreate(view)}}// 必须调用
top={-340}
offsetY={-150}
hudBackgroundColor={'transparent'}// hud全局背景色
/>
<View style={styles.monitor_view}>
{/*zhibo shikou */}
style={styles.player}
shouldMute={false}
playOnResume={false}
pauseOnStop={true}
onLoadState={(data) => {
this.handleLoadState(data);
}}
ref={e => {this.player = e; }}
url="rtmp://58.200.131.2:1935/livetv/hunantv" />
<View style={styles.txt_fixed}>
<Text style={{fontSize:12,color:"#fff"}}>局域网在线
<Text style={{fontSize:12,color:"#fff"}}>{this.state.time}
<View style={styles.opera_view}>
onPress={()=>this.selectGoods()}
style={styles.opera_item}>
source={require('../images/img_06.png')}
resizeMode={'cover'}
style={{width:60,height:60}}
/>
<Text style={{fontSize:16,color:"#696969"}}>图文导入
onPress={()=>this.props.navigation.push('DeviceLog')}
style={styles.opera_item}>
source={require('../images/img_05.png')}
resizeMode={'cover'}
style={{width:60,height:60}}
/>
<Text style={{fontSize:16,color:"#696969"}}>设备日志
)
}
}
var styles =StyleSheet.create({
player: {
position:'absolute',
width:'100%',
height:'100%'
},
monitor_view:{
width:Util.size.width-30,
height:300,
borderRadius:10,
backgroundColor:"transparent",
marginBottom:15
},
txt_fixed:{
position:'absolute',
top:15,
width:Util.size.width-30,
paddingHorizontal:15,
flexDirection:'row',
alignItems:'center',
justifyContent:"space-between"
},
opera_view:{
flex:1,
backgroundColor:"#fff",
borderRadius:10,
flexDirection:"row",
justifyContent:'space-around',
alignItems:'flex-start',
paddingTop:40
},
opera_item:{
alignItems:'center',
justifyContent:'center',
}
})
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
// import React, { Component } from 'react';
// import {
// AppRegistry,
// StyleSheet,
// View
// } from 'react-native';
// import { RtmpView } from 'react-native-rtmpview';
//
// export default class Example extends Component {
// constructor(props, context) {
// super(props, context);
// this.player = null;
// }
//
//
// componentDidMount() {
// this.player.initialize();
// }
//
// render() {
// return (
//
//
// style={styles.player}
// shouldMute={false}
// playOnResume={false}
// pauseOnStop={true}
// ref={e => { this.player = e; }}
// url="rtmp://58.200.131.2:1935/livetv/hunantv" />
//
// );
// }
// }
//
// 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,
// },
// player: {
// width: '100%',
// height: '50%'
// }
// });
//
// AppRegistry.registerComponent('Example', () => Example);
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
```
网友评论