如何為 react-native android 設置啟動畫面

Question

如何為 react-native android 設置啟動畫面，我找不到有關該主題的任何內容，我認為這很奇怪。

謝謝

Answer 1

我嘗試了以下 3 種方法。 第一個是我目前用於 react-native 項目的 android 啟動畫面。

1. 使用其他人編寫的 npm 包。

   參考： https : //github.com/remobile/react-native-splashscreen

2. 創建一個SplashScreen組件，然后重定向。

   參考： 如何創建某種啟動畫面/啟動畫面，在應用程序加載后消失？ （反應原生）

3. 原生在java代碼中。

   參考：https ://www.bignerdranch.com/blog/splash-screens-the-right-way/

我在initialRoute的componentDidMount()中有一個fetch請求。

使用上面列表中的第一種方式在顯示啟動屏幕的同時執行請求。

而第二種方式，需要等到SplashScreen組件被卸載。

第三種方法是編寫和維護的代碼稍微多一些。

Answer 2

本教程在這里效果很好 - 我引用了它並進行了一些修改，我添加了react-native-background-color觸摸。

https://medium.com/react-native-development/change-splash-screen-in-react-native-android-app-74e6622d699 （基於這個https://www.bignerdranch.com/blog/splash -screens-the-right-way/ - 所以這是原生 Android 技術）

1. 您需要在 res/drawable 中創建啟動畫面。 我們稱之為 splash_screen.xml

    <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@android:color/white"/> <item> <bitmap android:gravity="center" android:src="@mipmap/ic_launcher"/> </item> </layer-list>

2. 現在你需要更新 res/values/styles.xml

    <resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- Customize your theme here. --> </style> <style name="SplashTheme" parent="AppTheme"> <item name="android:windowBackground">@drawable/splash_screen</item> </style> </resources>

3. 現在打開 AndroidManifest.xml 並將AppTheme SplashTheme為 MainActivity 中的SplashTheme

    <activity android:name=".MainActivity" android:label="@string/app_name" android:theme="@style/SplashTheme" android:configChanges="keyboard|keyboardHidden|orientation|screenSize"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity>

   我們使用 SplashTheme 而不是更新 AppTheme，添加此背景只是為了啟動活動，而其他內容保持不變。

4. 嘗試以上操作后，您會注意到啟動畫面將始終停留在您的 js 視圖下方。 您有兩個選項可以隱藏啟動畫面：

   • 使用https://github.com/ramilushev/react-native-background-color 中的react-native-background-color 模塊在背景上設置一種顏色，這將刪除圖像。 （這是推薦的方式，因為在某些情況下當鍵盤顯示時，它會使根視圖在一瞬間可見。）
   • 或者在您的根視圖上設置純色（非透明）背景色。

請注意“根視圖”的含義。 這是您在應用中呈現的第一個由您控制的<View> （意味着您可以對其進行樣式設置）。

自定義顏色

如果你想使用自定義顏色，然后其他@android:color/*** ，那么你所要做的就是創建colors.xml在android\\app\\src\\main\\res\\values\\colors.xml並定義顏色像這樣：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="foobar">#ca949b</color>
</resources>

您可以使用任何名稱和任何顏色代碼。

然后回到splash_screen.xml我們將<item android:drawable="@android:color/white" />為<item android:drawable="@color/foobar" />

關於從后面刪除背景飛濺圖像的額外信息

在你創建這樣的飛濺之后。 您會注意到圖像永遠留在背景中。 要刪除此圖像，請使用此模塊 - https://github.com/ramilushev/react-native-background-color - 並使用任何顏色調用BackgroundColor.setColor('#XXXXXX') 。 它將刪除圖像。

不要在根視圖上使用不透明的顏色來覆蓋飛濺，仍然建議使用上述模塊，因為當鍵盤顯示時，背景視圖會顯示一秒鍾。

Answer 3

你試過用這個嗎？ 幾天前我遇到了這個。 在 iOS 上運行良好，但我還沒有在 Android 上測試過（應該沒問題）。 您應該安裝了 node >= 6 和 imageMagic。 （對於 Mac： brew install imagemagic ）

npm install -g yo generator-rn-toolbox
yo rn-toolbox:assets --splash IMGAE --android

Answer 4

您需要做的就是在啟動畫面中調用該功能。

componentWillMount() {
    setTimeout(() => {
        this.props.navigation.navigate('Login')
    }, 1000);
}