美文网首页
React-Native启动页到主页过渡

React-Native启动页到主页过渡

作者: 董董董董董董董董董大笨蛋 | 来源:发表于2017-03-29 10:00 被阅读0次

启动页是图片过渡两秒,componentWillUnmount()
需要清除定时器

'use strict';

import React from 'react';
import {
  Dimensions,
  Image,
  InteractionManager,
  View,
  Text,
} from 'react-native';

import AppMain from './AppMain';

var {height, width} = Dimensions.get('window');

class Splash extends React.Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    const {navigator} = this.props;
     this.timer=setTimeout(() => {
      InteractionManager.runAfterInteractions(() => {
        navigator.resetTo({
          component: AppMain,
          name: 'AppMain'
        });
      });
    }, 2500);
  }
  componentWillUnmount() {
    this.timer && clearTimeout(this.timer);
  }
 
  render() {
    return (
      <View style={{flex:1}}>
      <Image
        style={{flex:1,width:width,height:height}}
        source={require('../imgs/ic_welcome.jpg')}
        />
      </View>
    );
  }
}
export default Splash;

相关文章

  • React-Native启动页到主页过渡

    启动页是图片过渡两秒,componentWillUnmount()需要清除定时器

  • App页面分类

    引导页(欢迎页) 过渡页(启动页) 加载页 沉浸式页面 功能页,eg: 登陆、注册,设置,发布… 列表页 正文页,...

  • 登录页Activity从下向上的弹出效果实现

    最近产品有需求,一开始通过启动页进入登录页是正常的页面跳转,而后要进入主页面,在主页面里面的点击判断是否是登录状态...

  • React-Native App启动页制作(安卓端)

    原文地址:React-Native App启动页制作(安卓端) 这篇文章是根据开源项目react-native-...

  • 优雅的设计启动页

    设计一个启动页的两种方式 app 越来越复杂,主页启动越来越耗时,并且往往需要预加载数据,这时候先展示一个启动页就...

  • react-native启动页配置

    1启动图 安装第三方库(react-native-splash-screen); 根据react-native版本...

  • react-native项目Xcode11.3.1 (11C50

    问题描述:公司开发react-native项目。引入启动页,经自测发现,android没有问题,屏幕正常拉伸。io...

  • Android 引导页

    引导页 思路1.判断当前系统版本号2.如果与保存版本号不相同启动引导页跳转主页面如果相同等待指定时间跳转启动页 创...

  • Flutter自定义路由动画

    项目里的启动图是一个自定义的页面,启动图淡出后push主页,push的时候过渡很不自然,于是在push的时候加入了...

  • react-native 启动页(react-native li

    当前只有android的,案例中有android和ios的代码,可以直接下载查看 android 和ios的案例可...

网友评论

      本文标题:React-Native启动页到主页过渡

      本文链接:https://www.haomeiwen.com/subject/ymkeottx.html