Question

我正在开发示例应用程序，但我想要一个视频启动（在此视频持续时间为8秒），实际上我正在设置启动页面，但现在我想设置为Video Splash。

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

干杯：）

如何设置视频启动屏幕反应原生android

1 个答案: