react-native - 如何在 native 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;
            }
        });

干杯:)