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

干杯:)

如何在 React Native 中设置视频启动画面 android

How Can I Set Video Splash Screen in react native android

react-native

react-native-android