React-Native App启动页制作(安卓端)

原创 2018年04月17日 17:56:12

原文链接:Bougie的博客

react native启动页制作,隐藏启动白屏,打打广告
这篇文章是根据开源项目react-native-splash-screen来写的。在使用react-native-link命令安装该包后不知是何原因导致app无法运行了。issue也有很多用户说安装该包后项目出错。其实制作app启动页很简单,大可不必引用该包。下面开始正文。
splash_screen.gif
app启动页第一是为了宣传,第二是为了防止在app初始化期间屏幕白屏。所以app启动页不能干扰mainActivity的加载。app启动页一般方法就是在mainActivity上创建一个全屏的dialog,页面加载完成后关闭该dialog。下面介绍在react-native中加入app启动页的方法。

Native端

创建dialog全屏样式

在styles.xml中添加:

<style name="Dialog_Fullscreen">
  <item name="android:windowFullscreen">true</item>
  <item name="android:windowNoTitle">true</item>
</style>

创建布局文件

创建一个dialog内部的布局文件,命名为activity_launch.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:background="@drawable/launch_screen">
</LinearLayout>

其中launch_screen为启动页图片,必须为png格式,位于drawable目录下。

创建类SplashScreen:

public class SplashScreen {
  private static Dialog mSplashDialog;
  // 显示启动页
  public static void show(final Activity activity) {
    mSplashDialog = new Dialog(activity,R.style.Dialog_Fullscreen); // 设置dialog全屏
    mSplashDialog.setContentView(R.layout.activity_launch); // 设置dialog内容
    mSplashDialog.setCancelable(false);
    mSplashDialog.show();
  }
// 关闭启动页
  public static void hide(Activity activity) {
    mSplashDialog.dismiss();
    mSplashDialog = null;
  }
}

显示启动屏

在mainActivity创建时显示启动页,在MainActivity.java中添加:

@Override
protected void onCreate(Bundle savedInstanceState) {
  SplashScreen.show(this);
  super.onCreate(savedInstanceState);
}

对于rn项目,当HomePage执行到componentDidMount生命周期的时候,首屏渲染完毕,关闭启动页,故需要把类SplashScreen中的hide方法传递到js端。

添加js方法

创建ModuleHideSplash类继承ReactContextBaseJavaModule:

public class ModuleHideSplash extends ReactContextBaseJavaModule {
  private Context context;
  public ModuleHideSplash(ReactApplicationContext reactContext) {
    super(reactContext);
    context = reactContext;
  }
  @Override
  public String getName() {
    return "SplashScreen";
  }
  @ReactMethod
  public void show() {
    SplashScreen.show(getCurrentActivity());
  }
  @ReactMethod
  public void hide() {
    SplashScreen.hide(getCurrentActivity());
  }
}

添加module

创建myPackge并添加 ModuleHideSplash实例:

public class MyPackage implements ReactPackage {
  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }

  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();
    modules.add(new ModuleHideSplash(reactContext));
    return modules;
  }
}

添加package

最后在MainApplication.java中注册package:

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
    new MainReactPackage(),
    new MyPackage()
  );
}

js端

在js端关闭启动页:

import {NativeModules} from "react-native";
componentDidMount() {
  NativeModules.SplashScreen.hide();
}

原文链接:http://bougieblog.cn/article/55
大功告成!
壁纸送给大家
launch_screen.png

24小时react/react-native/flux/redux快速入门

react/react-native经过几年时间的锤炼,时至今日,无疑是目前前端开发最火的框架之一,搞定react/react-native,web端,移动端通吃,再加一个nodejs即成为现在最吃香的全栈工程师。
  • 2017年04月20日 10:30

React Native-创建项目和运行项目

安装完react以后,在终端输入以下:react-native init myFirstReactProject安装完成如下图: 蓝色框框里面就写清楚怎么运行,这个项目。 下面举个运行ios版...
  • zhaolaoda2012
  • zhaolaoda2012
  • 2016-09-06 14:07:13
  • 10501

Windows下配置React-native环境问题总结

从最近移动端市场的需求来看,Android原生开发已经危机重重,混合开发的大趋势已经越来越难以忽视了。不迎合趋势注定会被时代淘汰,因此选择了有FaceBook技术背书的Reactive Native作...
  • yimizhangye
  • yimizhangye
  • 2018-04-16 15:59:04
  • 23

React native搭建开发环境

Chocolatey 安装Chocolatey,输入cmd,进入控制台,输入 @&quot;%SystemRoot%\System32\WindowsPowerShell\v1.0\power...
  • weixin_41759092
  • weixin_41759092
  • 2018-04-17 16:14:31
  • 7

基于React Native构建的仿京东客户端(一) - 实现沉浸式状态栏和搜索栏

创建JdApp项目:myths-Mac:~ myth$ react-native init JdApp创建images文件夹,下载图片素材,将banner,header,home_icons,tabs...
  • zhengzizhi
  • zhengzizhi
  • 2018-04-10 23:30:38
  • 103

React Native 学习笔记(一)--init 项目 和 运行项目

首先,学习React Native首要的条件就是要有环境,至于怎么配置React Native大家可以在官网上按照步骤安装。不同的平台安装的步骤和需要的软件也不同,我这边是Windows环境(这里不说...
  • uana_777
  • uana_777
  • 2016-11-29 14:47:59
  • 3922

react native项目创建

react native项目创建、运行、调试 1、项目命令行创建、运行 react-native init myrnprj1 // 创建工程 cd myrnprj1 react-native s...
  • keen_zuxwang
  • keen_zuxwang
  • 2017-05-08 20:40:46
  • 1030

【React Native开发】React Native For Android环境配置以及第一个实例(1)

(一)前言                FaceBook早期开源发布了React Native For IOS,终于在2015年9月15日也发布了ReactNative for Android,虽然...
  • jiangqq781931404
  • jiangqq781931404
  • 2016-01-04 16:56:29
  • 19356

创建react-native项目

1、删除C:\Users\user\.yarnrc,C:\Users\user\.node_repl_history这两个文件 2、命令行中输入:react-native init demo 3、...
  • xiongge2005
  • xiongge2005
  • 2017-05-31 16:20:21
  • 538

React Native For Android学习之路-创建自定义原生模块

http://www.jianshu.com/p/fb451435a425?nomobile=yes http://www.jianshu.com/p/fb451435a425?nomobi...
  • u011904605
  • u011904605
  • 2016-11-25 21:32:45
  • 247
收藏助手
不良信息举报
您举报文章:React-Native App启动页制作(安卓端)
举报原因:
原因补充:

(最多只允许输入30个字)