react-native-splash-screen的坑--android
2017-10-31 10:39
871 查看
react-native-splash-screen的坑–android
最近在学习react-native,但是在启动APP的时候发现会有瞬间的白屏出现,ios白屏时间会很短,安卓要相对长一些,大概1-3s时间。这是react-native的工作机制决定的。 react-native在启动时会装载js bundle到内存并渲染界面,这段时间界面是一个空View。
上面的过程我们称之为项目的初始化,那么在这段项目初始化的过程中我们为了有更好的用户体验需要渲染一个对用户友好的界面来代替白屏,毕竟白屏对用户不太友好,你可以理解为跟h5中的loading是一个意思。然而配置原生的启动图不像我们加个loading那么简单,react-native-splash-screen帮我们封装了大部分配置,我们需要做部分的集成就可以使用,以下是配置教程:
1.下载及安装 react-native-splash-screen:
npm install react-native-splash-screen –save
react-native link react-native-splash-screen
2.创建布局文件
在android/app/src/main/res目录中,新建layout目录,在此目录下,创建launch_screen.xml文件,其内容如下:
3.添加启动页图片
在android/app/src/main/res目录中,新建drawable-xhdpi和drawable-xxhdpi目录,在其中放入启动页图片,命名为splash.png
4.修改Android源文件
4.1 android\settings.gradle
4.2 android\app\build.gradle
4.3 android\app\src\main\java\com\rn_practice\MainActivity.java
在public class MainActivity extends ReactActivity中加入
4.4 android\app\src\main\java\com\rn_practice\MainApplication.java
4.5 android\app\src\main\res\values\styles.xml
5.修改项目的js文件
这里就仁者见仁智者见智了, 具体修改哪个文件,要看你想放在哪了.我这里因为就一个js文件,index.android.js,所以是直接放在了这个文件中.在项目的根组件中,添加如下内容:
然后重新安装打包并安装APP到手机上,就会看到启动页
最近在学习react-native,但是在启动APP的时候发现会有瞬间的白屏出现,ios白屏时间会很短,安卓要相对长一些,大概1-3s时间。这是react-native的工作机制决定的。 react-native在启动时会装载js bundle到内存并渲染界面,这段时间界面是一个空View。
上面的过程我们称之为项目的初始化,那么在这段项目初始化的过程中我们为了有更好的用户体验需要渲染一个对用户友好的界面来代替白屏,毕竟白屏对用户不太友好,你可以理解为跟h5中的loading是一个意思。然而配置原生的启动图不像我们加个loading那么简单,react-native-splash-screen帮我们封装了大部分配置,我们需要做部分的集成就可以使用,以下是配置教程:
1.下载及安装 react-native-splash-screen:
npm install react-native-splash-screen –save
react-native link react-native-splash-screen
2.创建布局文件
在android/app/src/main/res目录中,新建layout目录,在此目录下,创建launch_screen.xml文件,其内容如下:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/splash"> </LinearLayout>
3.添加启动页图片
在android/app/src/main/res目录中,新建drawable-xhdpi和drawable-xxhdpi目录,在其中放入启动页图片,命名为splash.png
4.修改Android源文件
4.1 android\settings.gradle
rootProject.name = 'AwesomeProject' include ':app' include ':react-native-splash-screen' project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
4.2 android\app\build.gradle
dependencies { compile project(':react-native-splash-screen') // 确认存在, 如果不存在则需要手动增加这行 compile fileTree(dir: "libs", include: ["*.jar"]) compile "com.android.support:appcompat-v7:23.0.1" compile "com.facebook.react:react-native:+" // From node_modules }
4.3 android\app\src\main\java\com\rn_practice\MainActivity.java
import android.os.Bundle; import org.devio.rn.splashscreen.SplashScreen;
在public class MainActivity extends ReactActivity中加入
@Override protected void onCreate(Bundle savedInstanceState) { SplashScreen.show(this); super.onCreate(savedInstanceState); }
4.4 android\app\src\main\java\com\rn_practice\MainApplication.java
package com.awesomeproject; import android.app.Application; import com.facebook.react.ReactApplication; import org.devio.rn.splashscreen.SplashScreenReactPackage; // 添加这个 import com.facebook.react.ReactNativeHost; import com.facebook.react.ReactPackage; import com.facebook.react.shell.MainReactPackage; import com.facebook.soloader.SoLoader; import java.util.Arrays; import java.util.List; public class MainApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new SplashScreenReactPackage() // 添加这个 ); } @Override protected String getJSMainModuleName() { return "index"; } }; @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; } @Override public void onCreate() { super.onCreate(); SoLoader.init(this, /* native exopackage */ false); } }
4.5 android\app\src\main\res\values\styles.xml
<resources> <!-- Base application theme. --> <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> <item name="android:windowBackground">@drawable/splash</item> // 添加这个 <!-- Customize your theme here. --> </style> </resources>
5.修改项目的js文件
这里就仁者见仁智者见智了, 具体修改哪个文件,要看你想放在哪了.我这里因为就一个js文件,index.android.js,所以是直接放在了这个文件中.在项目的根组件中,添加如下内容:
import SplashScreen from 'react-native-splash-screen' export default class WelcomePage extends Component { componentDidMount() { // do anything while splash screen keeps, use await to wait for an async task. setTimeout(() => { SplashScreen.hide(); }, 1000); // 这里可以自定义来设置显示时间,让其暂停1秒后,再跳转到主页面 } }
然后重新安装打包并安装APP到手机上,就会看到启动页
相关文章推荐
- react-native-splash-screen 插件 android 系统app崩溃问题
- 使用react-native-smart-splash-screen实现启动画面
- 有效好用组件之启动屏react-native-splash-screen
- react-native-splash-screen插件安装apk发生crash
- react-native-splash-screen
- react-native-splash-screen 不支持 react-native 0.47.1
- react-native-splash-screen--RN 0.5以上报错集合
- React-native Android Java Module如何暴露自己的方法给js
- cordova SplashScreen插件在android上退出app后不再显示启动画面的问题
- 坑中速记整理! 使用 kotlin 写第一个 ReactNative Android 模块
- 【React Native开发】React Native For Android环境配置以及第一个实例(1)
- React-Native植入原声应用 - Android
- React—native+Android环境搭建和开发配置(Mac)
- React-Native-Android环境搭建
- React Native开发中解决Android端口被占用
- 【React Native开发】React Native For Android环境配置以及第一个实例
- Reactnative嵌套Android再嵌套ReactNative项目总结
- React-Native系列Android——Native与Javascript通信原理(三)
- react-native 打包Android Debug/Release APK