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

男娘i 2021-12-10 08:57 549阅读 0赞

> 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** 文件，直接复制官方源码

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]

<?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 下即可

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 3]

二、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 中导入、设置即可

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 7]  
导入后需要注意， Launch Screen File 文件需要清空，否则还是显示默认启动页  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 8]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 9]

> 以上，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(); // 关闭启动屏
      }
    }

> 效果图如下

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 10]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 11]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 12]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 13]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70]: /images/20211210/3b1bab5e06a14c088c7755f11102e682.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 1]: /images/20211210/6df1a72492934a219b869e096c36165f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 2]: /images/20211210/83f927d48f984f66a9c7833fd2c36e3e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 3]: /images/20211210/cbcd0563d3c546b69cb408ada69f0f29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 4]: /images/20211210/427aeeac65f541129111bafcaffe7946.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 5]: /images/20211210/a4a30821e0a449ea9abb3c38f49dbb8d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 6]: /images/20211210/ac6055efe078457ca0fa52a0e206d157.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 7]: /images/20211210/d1bac0a609c847938c09e7f3754bfb5a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 8]: /images/20211210/83a1d3c3bb7c476ab9ce43c2688fe255.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 9]: /images/20211210/b69798118d624bc193943fc48f72a063.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 10]: /images/20211210/4d1f8df34c634ec2a295c04f22ff9005.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 11]: /images/20211210/44a95ca36a6d4ca3be4f4ae7e5b05204.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 12]: /images/20211210/f5a454ae1e2745789a1b1205830cd0ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyYWR5Q0M_size_16_color_FFFFFF_t_70 13]: /images/20211210/05f1a4ff0fd64e66ad387d2c3b2c306e.png