我如何设置视频初始屏幕反应本机android

Question

我正在开发示例应用程序，但我想要一个视频飞溅（在这个视频持续时间是8秒），其实我设置飞溅页面，但现在我想设置到视频飞溅。

splashPage.js文件

这是我的代码。 从'react-native-video'导入视频;

//import Main from './main'; 
import LoginScreen from './App/Components/login.js'; 
class SplashPage extends Component { 

componentWillMount() { 
     var navigator = this.props.navigator; 
     setTimeout (() => { 

      navigator.replace({ 
       component: LoginScreen, 
       // <-- This is the View you go to 
      }); 
     }, 5000);  //<-- Time until it jumps to "MainView" 
    } 
    render() { 
     return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}> 

       <View>{StatusBar.setBackgroundColor('black', true)}</View> 
       <Video source={require('./images/splashVideo.mp4')} 
        style={{position: 'absolute', 
          top: 0, 
          left: 0, 
          right: 0, 
          bottom: 0, 
          opacity: 0.3}} 
          muted={true} 
          repeat={true} 
          resizeMode="cover"
  /> 
       {/*<Image style={{ width: windowSize.width, height: windowSize.height}} source={require('./images/splash.png')}></Image>*/} 
      </View> 
     ); 
    } 
} 

由于事先

Answer 1

让我们整合视频组件到您的闪屏：

1）安装节点模块：

npm install react-native-video --save or yarn add react-native-video --save 

2）中导入视频组件的闪屏组件：

`import Video from 'react-native-video' 

3）的闪屏的render()功能把视频组件

<Video source={require('path of video')} 
        style={{position: 'absolute', 
          top: 0, 
          left: 0, 
          right: 0, 
          bottom: 0, 
          opacity: 0.3}} 
          muted={true} 
          repeat={true} 
          resizeMode="cover"
    
      /> 

编辑内幕：

import LoginScreen from './App/Components/login.js'; 
import Video from 'react-native-video' 

class SplashPage extends Component { 

componentWillMount() { 
     var navigator = this.props.navigator; 
     setTimeout (() => { 

      navigator.replace({ 
       component: LoginScreen, 
       // <-- This is the View you go to 
      }); 
     }, 5000);  //<-- Time until it jumps to "MainView" 
    } 
    render() { 
     return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center',width:null,height:null}}> 
       <Video source={require('./images/splashVideo.mp4')} 
        style={{position: 'absolute', 
          top: 0, 
          left: 0, 
          right: 0, 
          bottom: 0, 
          opacity: 0.3}} 
          muted={true} 
          repeat={true} 
          resizeMode="cover"
  /> 
       <View>{StatusBar.setBackgroundColor('black', true)}</View> 
       {/*<Image style={{ width: windowSize.width, height: windowSize.height}} source={require('./images/splash.png')}></Image>*/} 
      </View> 
     ); 
    } 
} 

后退按钮集成：

BackAndroid.addEventListener('hardwareBackPress',() => { 
      const { navigator } = this.props 
      var routes = navigator.getCurrentRoutes() 

      if(routes[routes.length - 1].id == 'main' || routes[routes.length - 1].id == 'login') { 
       return false; 
      } 
      else { 
       this.popRoute(); 
       return true; 
      } 
     }); 

干杯:)