如何为 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);
}