如何为 react-native 设置启动画面 android

Question

如何为 react-native 设置启动画面 android，我找不到关于该主题的任何内容，我觉得这很奇怪。

谢谢

Answer 1

我试过以下3种方法。第一个是我目前用于 android react-native 项目启动画面的内容。

使用别人写的npm包

参考：https://github.com/remobile/react-native-splashscreen
创建一个 SplashScreen 组件然后重定向。

参考：
原生 java 代码。

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

我在 initialRoute 的 componentDidMount() 中有一个 fetch 请求。

使用上面列表中的第一种方式执行请求，同时显示初始屏幕。

而第二种方式，需要等到 SplashScreen 组件被卸载。

第三种方法是编写和维护的代码稍微多一些。

Answer 2

这里的教程很棒 - 我引用了它并做了一些修改，我添加了 react-native-background-color touch。

https://medium.com/react-native-development/change-splash-screen-in-react-native-android-app-74e6622d699 (which is based on this https://www.bignerdranch.com/blog/splash-screens-the-right-way/ - 所以这是本机 Android 技术)

You need to create splash screen in res/drawable. Let’s call it 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>
Now you need to update res/values/styles.xml
<resources>

    
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        
    </style>

<style name="SplashTheme" parent="AppTheme">
        <item name="android:windowBackground">@drawable/splash_screen</item>
    </style>

</resources>
Now open AndroidManifest.xml and replace AppTheme with SplashTheme in MainActivity
<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>
We use SplashTheme instead of updating AppTheme, to add this background only to start activity and leave other stuff without changes.
After you try the above out, you will notice the splash screen will always stay under your js views. You have two options to hide the splash screen:

Either use react-native-background-color module from https://github.com/ramilushev/react-native-background-color to set a color on the background which will remove the image. (This is the recommended way because when keyboard shows in some cases, it makes the root view visible for a split second.)

Or set a solid (non-transparent) background color on your root view.

注意 "root view" 的含义。这是第一个 <View> 您在您的应用程序中呈现的您控制的（意味着您可以设置它的样式）。

自定义颜色

如果你想使用自定义颜色，那么 @android:color/*** 那么你要做的就是在 android\app\src\main\res\values\colors.xml 处创建 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

您尝试使用 this 了吗？几天前我遇到了这个。在 iOS 上工作正常，但我还没有在 Android 上测试过（应该没问题）。您应该安装了 node >= 6 和 imageMagic。（对于 mac：brew install imagemagic）

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

如何为 react-native 设置启动画面 android

How to set the splash screen for react-native android

android

splash-screen

react-native

自定义颜色

关于从后面移除背景启动图像的额外信息