react-native-video

今天使用react-native-video 由于是最新的4.0.1版本，安装后，都不能启动react-native了，后来改成了3.2.1

npm install --save react-native@3.2.1

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View,TouchableOpacity,Dimensions} from 'react-native';

import Video from 'react-native-video';
import Orientation  from 'react-native-orientation';

const {width,height} = Dimensions.get('window');
type Props = {};
export default class MyTestVideo extends Component<Props> {



    constructor(props) {
        super(props);
        this.player = Video;
        this.state={
            muteFlag:true,
            landSpaceFlag:false,
            modalFlag:false
        };
    }

    changeMute(){
        alert("changeFlag");
        this.setState({
            muteFlag:!this.state.muteFlag
        });
    }

    changePortrait(){
        Orientation.lockToPortrait();
        this.setState({
            landSpaceFlag:false
        });
    }

    changeLANDSCAPE(){
        Orientation.lockToLandscape();
        this.setState({
            landSpaceFlag:true
        });
    }

    showLSModal(){
        this.setState({
            modalFlag:true
        });
    }

    hideModal1(){
        this.setState({
            modalFlag:false
        });
    }

    showNewView(){
        return(
            <Text style={{fontSize: 20,color: 'green'}}>
                this is new View
            </Text>
        );
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={{width:this.state.landSpaceFlag?0:width,height:this.state.landSpaceFlag?0:150,justifyContent: 'center',
                    alignItems: 'center',
                    }}>
                    <TouchableOpacity onPress={() => this.changeMute()}>
                        <Text> 改变mute </Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.showNewView()}>
                        <Text> 显示新View </Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.showLSModal()}>
                        <Text> 显示类似Modal </Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.changePortrait()}>
                        <Text> 竖屏 </Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.changeLANDSCAPE()}>
                        <Text > 横屏3333 </Text>
                    </TouchableOpacity>
                </View>

                <Video
                    source={require('./broadchurch.mp4')}// Can be a URL or a local file.
                       ref={(ref) => {
                           this.player = ref
                       }}
                        bufferConfig={
                            {
                                minBufferMs:15000,
                                maxBufferMs:50000,
                                bufferForPlaybackMs:2500,
                                bufferForPlaybackAfterRebufferMs:10000
                            }
                        }
                    repeat={true}
                        // controls:false  可能3.2.1没有这个项
                        // fullscreen:true
                       // Store reference
                       // onBuffer={this.onBuffer}                // Callback when remote video is buffering
                       // onError={this.videoError}               // Callback when video cannot be loaded
                       style={{width:this.state.landSpaceFlag?height:300,height:this.state.landSpaceFlag?width:200,zIndex:100}} />
                {/*<View style={{width:this.state.landSpaceFlag?100:0,height:this.state.landSpaceFlag?100:0,zIndex: 999,backgroundColor:'rgba(178,178,178,0.5)',}}>*/}
                {/*<View style={{width:this.state.landSpaceFlag?100:0,height:this.state.landSpaceFlag?100:0,zIndex: 999,backgroundColor:'rgba(178,178,178,0.5)',*/}
                    {/*position: 'absolute',right:20,bottom:10}}>*/}
                    {/*<TouchableOpacity onPress={() => this.changePortrait()}>*/}
                        {/*<Text style={{color: 'red'}}> 返回 </Text>*/}
                    {/*</TouchableOpacity>*/}
                {/*</View>*/}

                    {/*<View  style={{  position: 'absolute',left:100,top:200,width:this.state.modalFlag?width-200:0,height:this.state.modalFlag?height-300:0,backgroundColor:'rgba(178,178,178,0.5)'}}>*/}
                        {/*<TouchableOpacity onPress={()=>this.hideModal1()}*/}
                                          {/*style={{ flexDirection:'row',*/}
                                              {/*justifyContent:'center',*/}
                                              {/*alignItems:'center',  position: 'absolute',left:100,top:200,width:this.state.modalFlag?width-200:0,height:this.state.modalFlag?height-300:0,backgroundColor:'rgba(178,178,178,0.5)'}}>*/}
                            {/*<Text style={{  position: 'absolute',left:100,top:200,width:this.state.modalFlag?width-200:0,height:this.state.modalFlag?height-300:0,color:'red'}}> 类似modal </Text>*/}
                        {/*</TouchableOpacity>*/}
                    {/*</View>*/}

                {/*<View  style={{  position: 'absolute',left:100,top:200,width:this.state.modalFlag?width-200:0,height:this.state.modalFlag?height-300:0,backgroundColor:'rgba(178,178,178,0.5)'}}>*/}
                    {/*<TouchableOpacity onPress={()=>this.hideModal1()}*/}
                                      {/*style={{ flexDirection:'row',*/}
                                          {/*justifyContent:'center',*/}
                                          {/*alignItems:'center',  position: 'relative',left:100,top:200,width:50,height:50,backgroundColor:'blue'}}>*/}
                        {/*<Text style={{position:'relative',color:'blue'}}> 类似modalsss </Text>*/}
                    {/*</TouchableOpacity>*/}
                <View  style={{  position: 'absolute',left:20,top:30,width:200,height:300,backgroundColor:'rgba(178,178,178,0.5)'}}>
                    <TouchableOpacity onPress={()=>this.hideModal1()}
                                      style={{ flexDirection:'row',
                                          justifyContent:'center',
                                          alignItems:'center', width:200,height:300,backgroundColor:'blue'}}>
                        <Text style={{color:'green'}}> 类似modalsss啊啊啊啊啊 </Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}

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,
    },
    fullScreen: {
        // position: 'absolute',
        // top: 0,
        // left: 0,
        // bottom: 0,
        // right: 0,
        width:300,
        height: 200
    },
});