react-native 启动页(react-native link react-native-splash-screen)
16lz
2021-12-04
- 当前只有android的,案例中有android和ios的代码,可以直接下载查看
android 和ios的案例可见:
https://github.com/dai1254473705/react-native-splash-screen-study
文档地址
https://www.npmjs.com/package/react-native-splash-screen
1. 安装
npm i react-native-splash-screen --save
2. 自动关联
react-native link react-native-splash-screen
3. 修改MainActivity.java
文件
-
MainActivity.java
位置:./项目/android/app/src/main/java/com/项目名/Mainctivity.java
; - 修改后
MainActivity.java
所有代码如下:
注意事项:
- 当前使用的
"react-native-splash-screen": "^3.2.0"
,因此如下图所示,import不同的包(目前应该没有在使用低版本的了);
package com.awesomeproject;import android.os.Bundle; // here // react-native-splash-screen >= 0.3.1 import org.devio.rn.splashscreen.SplashScreen; // here import com.facebook.react.ReactActivity;public class MainActivity extends ReactActivity { /** * Returns the name of the main component registered from JavaScript. * This is used to schedule rendering of the component. */ @Override protected String getMainComponentName() { return "AwesomeProject"; } // 这部分是新增的 @Override protected void onCreate(Bundle savedInstanceState) { SplashScreen.show(this); // here super.onCreate(savedInstanceState); }}
4. 添加 launch_screen.xml
检查./app/src/main/res/layout/launch_screen.xml
是否存在,默认应该是没有layout
文件夹的,需要手动创建layout
文件夹,然后在layout
文件夹下新建launch_screen.xml
,将以下内容复制进去:
<?xml version="1.0" encoding="utf-8"?>
如图:
image.png
5. 添加启动图片
在 app/src/main/res/
下新建以下文件夹:
以下文件夹中放启动页的图片,系统会根据当前设备自动选择,android 环境下可以只放一个,会自适应缩放,然后将启动页图片命名为
launch_screen.png
(在launch_screen.xml
中指定android:src="@drawable/launch_screen"
,所以要是这个名字)
- drawable-ldpi
- drawable-mdpi
- drawable-hdpi
- drawable-xhdpi
- drawable-xxhdpi
- drawable-xxxhdpi
如图所示:
image.png
6. 设置colors.xml
文件
创建文件:app/src/main/res/values/colors.xml
内容如下:
<?xml version="1.0" encoding="utf-8"?> #000000
7. 设置启动页透明背景
修改 : android/app/src/main/res/values/styles.xml
如下所示:
8. 启动页自动消失
根据自己业务设置
import SplashScreen from 'react-native-splash-screen';componentDidMount() { setTimeout(()=>{ SplashScreen.hide(); // 隐藏启动屏 },3000) }
更多相关文章
- android:View的setTag和getTag使用
- Android(安卓)开机自动启动服务
- Android之音频录音
- Android(安卓)删除文件夹以及文件夹中的文件
- android多国语言文件夹文件汇总
- android Preference之android:dependency(列表依赖关系)
- android:configChanges="orientation|keyboardHidden"的使用
- Android全屏--两种activity的实现方式
- Android(安卓)关于Activity的四种启动模式的简单介绍