android react-native 运行,React-Native App启动页制作(安卓端)

这篇文章是根据开源项目react-native-splash-screen来写的。在使用react-native-link命令安装该包后不知是何原因导致app无法运行了。issue也有很多用户说安装该包后项目出错。其实制作app启动页很简单，大可不必引用该包。下面开始正文。

splash_screen.gif

app启动页第一是为了宣传，第二是为了防止在app初始化期间屏幕白屏。所以app启动页不能干扰mainActivity的加载。app启动页一般方法就是在mainActivity上创建一个全屏的dialog，页面加载完成后关闭该dialog。下面介绍在react-native中加入app启动页的方法。

首先创建一个dialog的全屏样式，在styles.xml中添加：

true

true

然后创建一个dialog内部的布局文件，命名为activity_launch.xml：

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@drawable/launch_screen">

其中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端。

创建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());

}

}

创建myPackge并添加 ModuleHideSplash实例：

public class MyPackage implements ReactPackage {

@Override

public List createViewManagers(ReactApplicationContext reactContext) {

return Collections.emptyList();

}

@Override

public List createNativeModules(ReactApplicationContext reactContext) {

List modules = new ArrayList<>();

modules.add(new ModuleHideSplash(reactContext));

return modules;

}

}

最后在MainApplication.java中注册package：

@Override

protected List getPackages() {

return Arrays.asList(

new MainReactPackage(),

new MyPackage()

);

}

在js端关闭启动页：

import {NativeModules} from "react-native";

componentDidMount() {

NativeModules.SplashScreen.hide();

}

launch_screen.png