React Native笔记3——自己做Splash界面

在安卓的学习路径中 , 启动页算是很靠前的一项了 , 可是在做RN的时候却发现, 很多教程都是通过开源框架去做的 , 拜托 , 刚开始就学框架不太好吧?? 所以在这里 , 我们可以使用安卓的思维去做一个RN的Splash界面 , 虽然我不知道这样好不好 , 但至少是可以实现的.

Android的实现方法

Splash界面最开始是为了在初始化App的时候不要有明显的卡顿 , 所以就做了个Splash页面来展示出来 ,同时初始化数据 . 不仅起到了宣传品牌的效果, 而且也明显的加强了用户体验
Android中有很多种方法可以实现 , 这里使用最简单的线程休眠方法.

new Thread(new Runnable() {
    @Override
    public void run() {
        try {
            Thread.sleep(3000);
            startActivity(intent);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }
}).start();

使用线程休眠来展示页面 , 当然在休眠的同时也可以去做一下初始化 , 3秒之后跳转界面.以此为据, 我们来做RN的Splash

React Native的Splash

1. 首先我对Navigator进行了抽取,封装成了MyNavigator, 是的传入的rootRoute作为第一界面, 如图所示:

/**
 * 抽取的Navigator 需要传入rootRoute作为第一界面
 */
export default class MyNavigator extends Component{
    render(){
        return(
             {
                    let configure = Navigator.SceneConfigs.PushFromRight;
                    switch (route.configure) {
                        case Consts.FloatFromLeft:
                            configure = Navigator.SceneConfigs.FloatFromLeft;
                            break;
                        case Consts.FloatFromBottom:
                            configure = Navigator.SceneConfigs.FloatFromBottom;
                            break;
                    }
                    return {
                        ...configure,
                        gestures: {}//禁用滑动退出
                    };
                }}
                renderScene={(route, navigator) => {
                    // 从route对象中获取页面组件
                    var Minuit = route.component;
                    return ();
                }}
            >
        )
    }
}

2. 在Splash界面中定义路由并传入页面信息

 render() {
        var rootRoute = {
            component: SplashPage //传入参数
        };
        return (
            
        );
    }

此时 , 默认的页面即为SplashPage, 这里直接放一张图片就好

render() {
        return (
            
                
        );
    }

这里一定要注意了 , 如下的属性可以让图片全屏(试了好久)

container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        width: null, //必须为null
        height: null, //必须为null
    },

3. 接下来就可以去模拟线程休眠了 , 在API中我们可以发现定时器这一控件 , 我们就用他来做: 在界面渲染完成的时候(componentDidMount)开始定时 , 3秒之后跳转到下一界面 ,界面不可见时(componentWillUnmount)清空定时器
   以下为SplashPage的完整代码

class SplashPage extends Component {
    // 界面渲染完成的回调
    componentDidMount() {
        // 开始计时
        this.timer = setTimeout(
            () => {
                 //3秒之后的操作
                var nextRoute = {
                    component: LoginAndRegisterPage,
                };
                this.props.navigator.push(nextRoute); // 页面跳转
            },
            3000
        );
    }

    componentWillUnmount() {
        // 如果存在this.timer，则使用clearTimeout清空。
        // 如果你使用多个timer，那么用多个变量，或者用个数组来保存引用，然后逐个clear
        this.timer && clearTimeout(this.timer);
    }

    render() {
        return (
            
                
        );
    }
}

---

至此 , Splash完成, 敲黑板写一下重点吧 , 这些自己了解就好

1. 图片的全屏()
2. 界面跳转Navigator
3. 定时器timer
4. 生命周期函数