react-native-lottie-splash-screen 安装与使用指南-优快云博客

react-native-lottie-splash-screen 安装与使用指南

react-native-lottie-splash-screen⚡ Lottie splash screen for your react native app!项目地址:https://gitcode.com/gh_mirrors/re/react-native-lottie-splash-screen

1. 项目目录结构及介绍

react-native-lottie-splash-screen 是一个用于React Native应用的动画启动屏插件，它利用Airbnb的Lottie库来展示动画效果，并在应用程序加载完成时自动隐藏。以下是基本的目录结构概览：

src: 通常包含主要的JavaScript源代码文件。
- index.js: 插件的主要入口点，提供API调用。
android: Android平台相关代码和资源。
- app: 应用程序级目录，包括src/main。
  - java: 包含MainActivity.java，需进行配置以支持此插件。
  - res:
    - layout: 存放自定义布局文件如launch_screen.xml。
    - raw: 存放Lottie动画的.json文件。
ios: iOS平台的相关代码。
- Your_Project_Name: 根据你的项目命名，包含必要的桥接文件和配置。
  - RCTSplashScreen.m/h: 插件的iOS实现部分。
example: 提供了一个示例应用来演示如何使用此插件。

2. 项目的启动文件介绍

Android 启动流程涉及文件

MainActivity.java: 启动时首先执行的Java类，通过以下代码集成启动动画：

import org.devio.rn.splashscreen.SplashScreen; // 引入启动屏幕库
...
@Override
protected void onCreate(Bundle savedInstanceState) {
    SplashScreen.show(this, R.id.lottie); // 在这里显示启动动画
    super.onCreate(savedInstanceState);
    ...
}

其中，R.id.lottie应该对应于XML布局文件中的Lottie视图ID。

launch_screen.xml: 布局文件，位于res/layout，定义了启动界面的布局，含有Lottie动画视图：

<LinearLayout ...>
    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottie"
        ... />
</LinearLayout>

iOS 启动流程涉及文件

AppDelegate.m: 对应于iOS的启动逻辑，需添加对RNSplashScreen.h的导入以及对应的初始化代码：

#import "RNSplashScreen.h" // 导入启动屏支持
...
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    [RNSplashScreen show]; // 显示启动屏幕
    ...
    return YES;
}

3. 项目的配置文件介绍

安装与初始配置

全局步骤

安装依赖：

npm i react-native-lottie-splash-screen --save

平台特定配置：
- Android:
  - 自动或手动链接插件。
  - 更新MainActivity.java以引入并调用SplashScreen.show。
  - 确保build.gradle文件添加了依赖。
- iOS:
  - 连接到项目（使用CocoaPods或手动）。
  - 更新AppDelegate.m以显示启动屏幕。
  - 修改MainApplication.java（对于Android），确保引入正确的包和配置React Native主机。