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

Question

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

谢谢

Answer 1

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

1. 使用其他人编写的 npm 包。

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

2. 创建一个SplashScreen 组件并随后重定向。

   参考：How to create some kind of Splash screen/Launching screen, which disappears after App loaded? (React Native)

3. 原生于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（基于 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 并将 MainActivity 中的 AppTheme 替换为 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/*** 之外的自定义颜色，那么您需要在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