app启动页react-native-splash-screen

2018-06-19  本文已影响0人  YDM_4718

react-native启动时会装载js bundle到内存并渲染界面,这段时间界面是一个空View(白屏)。这个过程即为项目初始化过程中。瞬间的白屏会影响用户体验,因此利用react-native-splash-screen可以配置一个对用户体验相对友好的启动页。

步骤

1、下载:react-native-splash-screen

在项目根目录运行终端执行 yarn add react-native-splash-screen(推荐) 或者 npm install react-native-splash-screen --save

如报错请运行多次,下载成功如下

2、安装:react-native link react-native-splash-screen

运行终端执行以下命令进行自动安装

3、android配置

(1)、打开android\app\src\main\java\com目录下的MainActivity.java添加以下三项,如图

A、import android.os.Bundle;

B、import org.devio.rn.splashscreen.SplashScreen;

C、@Override

protected void onCreate(Bundle savedInstanceState) {

SplashScreen.show(this);

super.onCreate(savedInstanceState);

}

(2)、在 android/app/src/mian/res目录下创建layout文件夹,并在创建的layout文件夹中创建launch_screen.xml,添加相应配置

在项目根目录运行终端执行:

A、创建layout文件夹: mkdir android/app/src/main/res/layout

(3)、在 android/app/src/mian/res目录下创建drawable-xhdpi和drawable-xxhdpi文件夹,并添加名为launch_screen.png的图片(若要想适配的更全面可以像mipmap一样添加不同分辨率的图片)

在项目根目录运行终端执行:

A、创建drawable-xhdpi文件夹

B、创建drawable-xxhdpi文件夹

4、使用

在首页导入react-native-splash-screen,在componentDidMount中执行hide隐藏启动屏(不是必须,可按照需要在适当的时候隐藏)

5、运行项目看效果

6、关于报错

(1)、放上启动页的图片时。因为Androidstudio严格审查png图片,要是png没有达到Androidstudio的要求,或者格式错误,则会报如下错误

java.util.concurrent.ExecutionException: com.android.ide.common.process.ProcessException:

则在build.gradle文件下的android下添加

aaptOptions.cruncherEnabled = false    和    aaptOptions.useNewCruncher = false 这两句即可,表示忽略png严格检查

(2)、

报如上图的错误时,解决方法如下:

上一篇下一篇

猜你喜欢

热点阅读