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

Question

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

谢谢

Answer 1

我尝试了以下3种方法.第一个是我目前用于反应原生项目的android启动画面.

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

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

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

   参考:如何创建某种Splash屏幕/启动屏幕,在App加载后消失？(React Native)

3. 本地java代码.

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

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

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

而第二种方式,需要等到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

   <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.xmlat 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上测试过.您应该安装节点> = 6并安装imageMagic.(对于MAC: brew install imagemagic)

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