1. 程式人生 > >react-native app 的啟動頁的製作方法

react-native app 的啟動頁的製作方法

第一步:安裝依賴: npm install react-native-splash-screen –save

第二步:然後執行命令: react-native link

第三步:修改android\app\src\main\java\com\xx\MainActivity.java中的內容為:

import android.os.Bundle;
import org.devio.rn.splashscreen.SplashScreen;
import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "StoreManager";
    }

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

第四步:新建android\app\src\main\res\layout 檔案,並在資料夾中新建launch_screen.xml檔案,內容如下:

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

第五步:在目錄 android\app\src\main\res\ 下新建 drawable-xhdpi 和 drawable-xxhdpi 資料夾,把啟動頁圖片放進去,都命名為launch_screen.png

第六步:將 AndroidManifest.xml 檔案中的 application 標籤中的 android:allowBackup 屬性設定為 true。

第七步:在目錄 android\app\src\main\res\values 下新建 colors.xml 檔案,新增以下內容:

<resources>
    <color name="primary_dark">#660B0B0B</color>
</resources>

在啟動過程中還可能會出現 IO 錯誤,多試幾次就行了。