React Native react-native-splash-screen 启动屏库

RN 项目 安装 react-native-splash-screen 启动屏库

# 安装 react-native-splash-screen
yarn add react-native-splash-screen

// package.json
{
  "name": "RNApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint .",
    "postinstall": "npx jetify"
  },
  "dependencies": {
    "@ant-design/react-native": "^3.1.9",
    "lodash": "^4.17.11",
    "react": "16.8.6",
    "react-native": "0.60.0",
    "react-native-gesture-handler": "^1.3.0",
    "react-native-splash-screen": "^3.2.0",
    "react-native-swiper": "^1.6.0-nightly.2",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation": "^3.11.0"
  },
  "devDependencies": {
    "@babel/core": "^7.5.0",
    "@babel/runtime": "^7.5.0",
    "@react-native-community/eslint-config": "^0.0.5",
    "babel-jest": "^24.8.0",
    "babel-plugin-import": "^1.12.0",
    "eslint": "^6.0.1",
    "jest": "^24.8.0",
    "jetifier": "^1.6.1",
    "metro-react-native-babel-preset": "^0.55.0",
    "react-test-renderer": "16.8.6"
  },
  "jest": {
    "preset": "react-native"
  }
}

根据文档配置 android 和 ios 环境

一、andorid环境：

• 需要链接原生库，建议使用 react-native link 命令自动安装

# 链接原生库
react-native link react-native-splash-screen

• 编辑 MainActivity.java 文件，调用原生方法，文件路径：android/app/src/man/java/com/rnapp/MainActivity.java

// 原文件
package com.rnapp;

import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "RNApp";
    }
}

// 编辑后文件
package com.rnapp;

import android.os.Bundle;
import org.devio.rn.splashscreen.SplashScreen;
import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "RNApp";
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this); // 显示启动屏
        super.onCreate(savedInstanceState);
    }
}

• 创建启动屏文件，在 android/app/src/man/res 下 创建 layout/launch_screen.xml 文件，直接复制官方源码

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:orientation="vertical" android:layout_width="match_parent"
                android:layout_height="match_parent">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>

• 制作启动屏图片，在 PhotoShop 中完成做图后，使用 图标工厂 生成启动页图，这里注意，生成前，将背景色旁边，不需要的选项点掉，默认是全部选中的。生成后，改名放置在 android/app/src/main/res 下即可

二、ios环境：

• 需要更新Pods文件，在ios目录下执行

# 更新Pods
pod update

• 编辑 AppDelegate.m 文件，调用原生方法，文件路径：ios/项目名

// 原文件
#import "AppDelegate.h"

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"RNApp"
                                            initialProperties:nil];

  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

@end

// 编辑后文件
#import "AppDelegate.h"
#import "RNSplashScreen.h"  // 引入 RNSplashScreen.h

#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                   moduleName:@"RNApp"
                                            initialProperties:nil];

  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  [RNSplashScreen show];  // 显示启动屏
  return YES;
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

@end

• 制作启动屏图片，在 PhotoShop 中完成做图后，使用 App Icon Gear 制作（没有的话，可以在 App Store 中下载安装），选择“纵向启动图”或默认"自动"，将图片放入后，自动生成启动页，在 xcode 中导入、设置即可

导入后需要注意， Launch Screen File 文件需要清空，否则还是显示默认启动页

以上，android 和 ios 环境配置完成，只需在 App.js 加载完成后，关闭启动屏即可

import React, { Fragment, Component } from "react";
import { SafeAreaView, Platform, View } from "react-native";
import { Button } from "@ant-design/react-native"; // 集成ant-mobile-rn, 按需引入
import AppNavigator from "./app/router/index";
import SplashScreen from "react-native-splash-screen";

const Navigator = Platform.select({
  ios: () => (
    <View style={{ flex: 1, backgroundColor: "#dbdbdb" }}>
      <AppNavigator />
    </View>
  ),
  android: () => (
    <SafeAreaView style={{ flex: 1, backgroundColor: "#dbdbdb" }}>
      <AppNavigator />
    </SafeAreaView>
  )
})();

export default class App extends Component {
  render() {
    return <Fragment>{Navigator}</Fragment>;
  }

  componentDidMount() {
    SplashScreen.hide(); // 关闭启动屏
  }
}

效果图如下