ChargEco/Strides-SPAPP/app/pages/Launch.js

/**
 * 开屏页面
 * @邠心vbe on 2021/03/22
 */
import React from 'react'
import { Animated, Easing, Image, StyleSheet, View } from 'react-native'
import {InitSomething} from '../components/Dialog';
import MyStatusBar from '../components/MyStatusBar';
import { PageList } from './Router';

class Launch extends React.Component {
  
  constructor(props) {
    super(props);
    this.state = {
      isShow: true,
      opacity: new Animated.Value(0)
    };
  }

  componentDidMount() {
    this.init();
    //MyStatusBar.setStatusBarThemes(MyStatusBar.DARK_STYLE, colorLight);
    InitSomething();
    if (isIOS) {
      this.goHome(100);
    } else {
      this.goHome(2500);
    }
  }

  init() {
    Animated.timing(this.state.opacity, {
      toValue: 1,
      duration: 1500,
      easing: Easing.linear,
      useNativeDriver: true
    }).start(() => {
      
    });
  }

  goHome(time) {
    setTimeout(() => {
      this.setState({
        isShow: false
      }, () => {
        // 确保状态更新完成后再导航
        startPage(PageList.home);
      });
    }, time);
  }
  
  render() {
    return (
      this.state.isShow
      ? isIOS
        ? <View style={styles.iosContent}></View>
        : <View style={styles.container}>
            <Animated.View style={[styles.content, {opacity: this.state.opacity}]}>
              <Image
                style={styles.logo}
                resizeMode='contain'
                source={require('../images/app-logo.png')}/>
              {/* <Text style={styles.slogan}>Feel The Green Energy</Text> */}
            </Animated.View>
          </View>
      : <View style={styles.loaded}></View>
    );
  }
}

export default Launch

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    backgroundColor: colorLight,
    ...StyleSheet.absoluteFillObject
  },
  iosContent: {
    flex: 1,
    backgroundColor: colorLight
  },
  loaded: {
    flex: 1,
    backgroundColor: '#eee'
  },
  content: {
    alignItems: 'center',
    paddingTop: $vh(30)
  },
  logo: {
    width: 240,
    height: 120,
    marginLeft: 0,
    //top: $vh(25),
    //bottom: $vh(25),
    //position: 'absolute'
  },
  slogan: {
    color: textPrimary,
    fontSize: 14,
    fontStyle: 'italic',
    fontWeight: 'bold'
  }
});