React Native android Icon和启动页

React Native android Icon和启动页

1、Icon

android的图标的更改还是很简单的，简要的说一下

1、在项目根目录中进入一下路径：android/app/src/main/AndroidManifest.xml

红线标注的地方就是icon

icon的分辨率（包含圆角）

分辨率分别为72x72, 48x48, 96x96, 144x144

只需把下面路径的图片根据分辨率大小换掉就可以了

看下图路径，这样Android的icon就解决了

2、启动页

启动页相对复杂了一些

 **另外需注意你APP根目录名字有大写的时候，Java导入包同意写成小写**
 **例如：  APP名字是testTest时，Java导入包写成testtest**
 **package com.testtest;**

2.1 生成自己的启动页图标

推荐一个网址 https://apetools.webprofusion.com 可以生成一整套的图标

当然也是有缺点的

生成后你会得到如下图的文件

当然，你也可以自己做

2.2 把生成的图标放到指定的位置

android/app/src/main/res/

2.3 编写引入背景图片

首先要在android/app/src/main/res/创建一个文件夹layout

创建splash_screen.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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/screen">  //引入图片地址
</LinearLayout>

2.4 编写样式

添加以下代码

路径: android/app/src/main/res/values/styles.xml

    <style name="SplashScreen_Fullscreen" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowFullscreen">true</item>
        <item name="windowActionBar">false</item>
        //一定要，否则有状态栏显示，不能全屏
        <item name="windowNoTitle">true</item>
    </style>

2.5 启动页的显示和关闭

路径： android/app/src/main/java/com/APPNAME/module/

若没有module，新建一个

1、创建SplashScreen类实现显示与关闭启动页的功能

package com.test.module;  //test为项目名(注意指定小写)

import android.app.Activity;
import android.app.Dialog;
import java.lang.ref.WeakReference;
import com.test.R;

public class SplashScreen {
    private static Dialog mSplashDialog;
    private static WeakReference<Activity> mActivity;

    /**
     * 打开启动屏
     */
    public static void show(final Activity activity,final boolean fullScreen) {
        if (activity == null) return;
        mActivity = new WeakReference<Activity>(activity);
        activity.runOnUiThread(new Runnable() {
            @Override
            public void run() {
                if (!activity.isFinishing()) {

                    mSplashDialog = new Dialog(activity, R.style.SplashScreen_Fullscreen);
                    mSplashDialog.setContentView(R.layout.splash_screen);
                    mSplashDialog.setCancelable(false);

                    if (!mSplashDialog.isShowing()) {
                        mSplashDialog.show();
                    }
                }
            }
        });
    }
    /**
     * 打开启动屏
     */
    public static void show(final Activity activity) {
        show(activity,false);
    }

    /**
     * 关闭启动屏
     */
    public static void hide(Activity activity) {
        if (activity == null) activity = mActivity.get();
        if (activity == null) return;

        activity.runOnUiThread(new Runnable() {
            @Override
            public void run() {
                if (mSplashDialog != null && mSplashDialog.isShowing()) {
                    mSplashDialog.dismiss();
                }
            }
        });
    }
}

2、创建SplashScreenModule类继承ReactContextBaseJavaModule

package com.test.module;  //test为项目名(注意指定小写)

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class SplashScreenModule extends ReactContextBaseJavaModule {
    public SplashScreenModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        return "SplashScreen";
    }

    /**
     * 打开启动屏
     */
    @ReactMethod
    public void show() {
        SplashScreen.show(getCurrentActivity());
    }

    /**
     * 关闭启动屏
     */
    @ReactMethod
    public void hide() {
        SplashScreen.hide(getCurrentActivity());
    }
}

3、创建SplashScreenReactPackage 并添加 SplashScreenModule实例

package com.test.module;   //test为项目名(注意指定小写)

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class SplashScreenReactPackage 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 SplashScreenModule(reactContext));
        return modules;
    }
}

2.6 在MainActivity中添加启动时显示启动页

路径： android/app/src/main/java/com/APPNAME/MainActivity.java

在MainActivity类中添加

如果 Bundle 没引入被忘了引入

import android.os.Bundle;
import com.test.module.SplashScreen;  //test项目名(注意指定小写)

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

2.7 最后在MainApplication.java中注册SplashScreenReactPackage

路径： android/app/src/main/java/com/APPNAME/MainApplication.java

需添加：

import com.test.module.SplashScreenReactPackage; //test项目名(注意指定小写)

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

到这里就结束了。

从新react-native run-android，应该就能显示出来了。

最后在APP的启动页添加隐藏启动页就OK了

	import {NativeModules} from 'react-native';
	var SplashScreen = NativeModules.SplashScreen;

    componentDidMount() {
       if (Platform.OS === 'android') {
           //安卓通过SplashScreen设置启动页
           this.timer = setTimeout(
               () => {
                   SplashScreen.hide();
               },
               500
           );
       }
   }
   //最后别忘了卸载 定时器
   componentWillUnmount(){
        this.timer && clearTimeout(this.timer);
    }

感谢下面大神的分享

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

2、react native android应用启动画面

3、react-native APP图标和Splash(Android)

写在最后：

本人小白，文章是个人测试的，若有不足之处，望批评指正。

拜谢！