Question

如何设置反应原生android的启动画面，我无法找到关于该主题的任何内容，我认为这很奇怪。

由于

Answer 1

我曾尝试过以下三种方式。第一个是我目前用于反应原生项目的android启动画面。

使用其他人编写的npm包。

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

参考：How to create some kind of Splash screen/Launching screen, which disappears after App loaded? (React Native)
本地使用java代码。

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

我在fetch的{{1}}中收到了componentDidMount()个请求。

使用上面列表中的第一种方式在显示启动画面时执行请求。

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

第三种方式是编写和维护的代码稍多。

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技术）

您需要在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>
现在您需要更新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>
现在打开AndroidManifest.xml并将AppTheme替换为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，仅将此背景添加到开始活动并留下其他内容而不进行更改。
尝试上述操作后，您会发现启动画面始终位于您的js视图下。您有两个选项可以隐藏启动画面：


使用https://github.com/ramilushev/react-native-background-color中的react-native-background-color模块在背景上设置将删除图像的颜色。（这是推荐的方式，因为在某些情况下键盘显示时，它会使根视图瞬间可见。）

或者在根视图上设置实体（非透明）背景颜色。

注意＆＃34;根视图＆＃34;手段。这是您在应用中呈现的第一个<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

您是否尝试使用this？我几天前遇到过这个。适用于iOS，但我还没有在Android上测试过它。您应该安装节点＆gt; = 6并安装imageMagic。（对于mac：$ENV{HTTP_COOKIE}）

brew install imagemagic

Answer 4

您需要做的就是在启动屏幕中调用该函数。

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

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

4 个答案:

自定义颜色

有关从后面删除背景启动图像的其他信息