Wie kann ich Video-Splash-Bildschirm in reagieren nativen Android

Question

Ich entwickle Beispielanwendung, aber ich möchte ein Video Splash (in diesem Video Dauer ist 8 Sek.), Eigentlich bin ich Setting Splash-Seite, Aber jetzt möchte ich einstellen zu Video Splash.

splashPage.js Datei

Dies ist mein Code. Video von 'react-native-video' importieren;

//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> 
     ); 
    } 
} 

Dank im Voraus,

Answer 1

Lassen Sie uns Video-Komponente in Ihre Splash-Screen integrieren:

1) Installieren Sie den Knotenmodul:

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

2) Importieren Sie die Video-Komponente in Ihrem Splash-Screen-Komponente:

`import Video from 'react-native-video' 

3) im Inneren des Bauteils render() Funktion setzen Videos Splash-Screen

<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"
    
      /> 

Edits:

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> 
     ); 
    } 
} 

Zurück-Taste Integration:

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; 
      } 
     }); 

Prost :)