現(xiàn)在我們做一個(gè)APP,不可避免的要添加一個(gè)啟動(dòng)頁,使APP對(duì)用戶更加友好.廢話少說,我們現(xiàn)在就來介紹如何利用react-native-splash-screen為Android APP實(shí)現(xiàn)啟動(dòng)頁.

需要注意的是,如果你是為IOS實(shí)現(xiàn),那么步驟是不一樣的.具體請(qǐng)看官網(wǎng).

步驟

添加依賴

在項(xiàng)目根目錄下執(zhí)行下面這條命令:npm i react-native-splash-screen --save
然后,我們還需要鏈接一下:react-native link

創(chuàng)建布局文件

在android/app/src/main/res目錄中,新建layout目錄,在此目錄下,創(chuàng)建launch_screen.xml文件,其內(nèi)容如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/launch_screen">
</LinearLayout>

添加啟動(dòng)頁圖片

在android/app/src/main/res目錄中,新建drawable-xhdpi和drawable-xxhdpi目錄,在其中放入啟動(dòng)頁圖片,命名為launch_screen.png

修改Android源文件

修改android/app/src/main/java/com/meizhuang/MainActivity.java文件,添加如下內(nèi)容:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);
        super.onCreate(savedInstanceState);
    }

修改完成后,如下圖所示:

修改項(xiàng)目的js文件

這里就仁者見仁智者見智了, 具體修改哪個(gè)文件,要看你想放在哪了.我這里因?yàn)榫鸵粋€(gè)js文件,index.android.js,所以是直接放在了這個(gè)文件中.在項(xiàng)目的根組件中,添加如下內(nèi)容:

import SplashScreen from 'react-native-splash-screen'

export default class WelcomePage extends Component {

    componentDidMount() {
         // do anything while splash screen keeps, use await to wait for an async task.
        SplashScreen.hide();
    }
}

我這里稍微修改了一下,讓其暫停兩秒后,再跳轉(zhuǎn)到主頁面:

然后重新安裝打包并安裝APP到手機(jī)上,就會(huì)看到啟動(dòng)頁