React-Native android端添加啟動(dòng)頁(yè)

使用RN編寫(xiě)完簡(jiǎn)單的第一版應(yīng)用后,才發(fā)現(xiàn)還沒(méi)有添加啟動(dòng)圖,各種查找如何添加,不過(guò)資料不多再加上好多已經(jīng)過(guò)時(shí)過(guò)程還是比較痛苦的,所以把這個(gè)過(guò)程記錄下來(lái)。

使用react-native-splash-screen開(kāi)源組件,地址https://github.com/crazycodeboy/react-native-splash-screen/blob/master/README.zh.md

    第一步(項(xiàng)目根目錄運(yùn)行):npm i react-native-splash-screen --save
    第二步:react-native link react-native-splash-screen,安裝完成后,就會(huì)自動(dòng)在android項(xiàng)目里面自動(dòng)添加需要的代碼了,
    第三步:修改android/app/src/main/java/com/APPNAMES(你自己的項(xiàng)目名)/MainActivity.java文件如下:
    public class MainActivity extends ReactActivity {
           @Override
            protected void onCreate(Bundle savedInstanceState) {
                  SplashScreen.show(this);  // 加上這句,顯示啟動(dòng)圖
                    super.onCreate(savedInstanceState);
        }
      // ...other code
  }

第四步:在android/app/src/main/res/layout/創(chuàng)建一個(gè)名為 launch_screen.xml 的布局文件來(lái)自定義你的啟動(dòng)屏幕,注意這里面背景圖的名字是:launch_screen,其實(shí)就是drawable-xhdpi,drawable-xxhdpi,drawable-xxxhdpi.......里的launch_screen.png,也就是我們最后要看到的啟動(dòng)圖

       <?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>

原生端基本寫(xiě)完了,然后就是RN項(xiàng)目里面寫(xiě)隱藏啦,在注冊(cè)的入口文件里引入:import SplashScreen from 'react-native-splash-screen',
然后加上RN的生命周期方法,渲染完成后就隱藏掉啟動(dòng)圖

        componentDidMount() {
              SplashScreen.hide(); // 隱藏啟動(dòng)圖
        }

然后一個(gè)簡(jiǎn)單的啟動(dòng)圖就加完了,其實(shí)按照官網(wǎng)的流程已經(jīng)很詳細(xì)了,按照那個(gè)走就沒(méi)問(wèn)題,歡迎大神交流指點(diǎn)

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。