在安卓的學習路徑中 , 啟動頁算是很靠前的一項了 , 可是在做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(
            <Navigator
                initialRoute={this.props.rootRoute}
                configureScene={(route) => {
                    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 (<Minuit
                        navigator={navigator} {...route.passProps}/>);
                }}
            ></Navigator>
        )
    }
}

2. 在Splash界面中定義路由并傳入頁面信息

 render() {
        var rootRoute = {
            component: SplashPage //傳入參數
        };
        return (
            <MyNavigator rootRoute={rootRoute}/>
        );
    }

此時 , 默認的頁面即為SplashPage, 這里直接放一張圖片就好

render() {
        return (
            <View style={{flex: 1}}>
                <StatusBar hidden={true} translucent={true}/>
                <Image source={require('./modules/img/splash.png')} style={styles.container}>
                </Image>
            </View>
        );
    }

這里一定要注意了 , 如下的屬性可以讓圖片全屏(試了好久)

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 (
            <View style={{flex: 1}}>
                <StatusBar hidden={true} translucent={true}/>
                <Image source={require('./modules/img/splash.png')} style={styles.container}>
                </Image>
            </View>
        );
    }
}

至此 , Splash完成, 敲黑板寫一下重點吧 , 這些自己了解就好

1. 圖片的全屏()
2. 界面跳轉Navigator
3. 定時器timer
4. 生命周期函數