# @exodus/react-native-splash-screen 中文文档

规范地址：https://npmcn.com/package/%40exodus/react-native-splash-screen/

版本：6\.0\.2
npm 元数据更新时间：2026-10-06T21:03:02.969Z
中文译文更新时间：2026-11-14T04:14:13.182Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40exodus/react-native-splash-screen
原文对照：https://npmcn.com/package/%40exodus/react-native-splash-screen/?lang=original
项目主页：https://github.com/crazycodeboy/react-native-splash-screen#readme
源码仓库：https://github.com/crazycodeboy/react-native-splash-screen

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：40.7 kB，21 个文件
- TypeScript 类型：包内自带
- 运行依赖：0 个
- peer 依赖：react-native \>=0\.57\.0
- 首次发布：2019-04-08T21:07:36.223Z
- 最新版本发布：2026-01-29T10:46:10.503Z
- 近 30 天下载量：10639（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：30（近 12 个月 3 个）

## 中文简介

用于反应的喷出屏幕, 当应用程序装入时隐藏, 它工作在iOS和Android上.

## 安装

```sh
npm install @exodus/react-native-splash-screen
```

也可以使用：`pnpm add @exodus/react-native-splash-screen`、`yarn add @exodus/react-native-splash-screen`、`bun add @exodus/react-native-splash-screen`

## README

# react-native-splash-screen

 [![Download](https://img.shields.io/badge/Download-v3.1.1-ff69b4.svg)](https://www.npmjs.com/package/react-native-splash-screen)[![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-brightgreen.svg)](https://github.com/crazycodeboy/react-native-splash-screen/pulls) [![react-native-splash-screen release](https://img.shields.io/github/release/crazycodeboy/react-native-splash-screen.svg?maxAge=2592000?style=flat-square)](https://github.com/crazycodeboy/GitHubPopular/releases) [![language English](https://img.shields.io/badge/language-English-feb252.svg)](https://github.com/crazycodeboy/GitHubPopular/) [![License MIT](http://img.shields.io/badge/license-MIT-orange.svg?style=flat)](https://raw.githubusercontent.com/crazycodeboy/react-native-check-box/master/LICENSE) [![原理 解析](https://img.shields.io/badge/%E5%8E%9F%E7%90%86-%E8%A7%A3%E6%9E%90-brightgreen.svg)](https://github.com/crazycodeboy/RNStudyNotes/blob/master/React%20Native%20%E9%97%AE%E9%A2%98%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%E5%90%88%E9%9B%86/React%20Native%20%E5%90%AF%E5%8A%A8%E7%99%BD%E5%B1%8F%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%E6%95%99%E7%A8%8B/React%20Native%20%E5%90%AF%E5%8A%A8%E7%99%BD%E5%B1%8F%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%E6%95%99%E7%A8%8B.md)

React Native启动屏，解决iOS，Android启动白屏问题，支持Android和iOS。

## 目录

-   [安装说明](https://npmcn.com/package/%40exodus/react-native-splash-screen/#readme-%E5%AE%89%E8%A3%85%E8%AF%B4%E6%98%8E)
-   [演示](https://npmcn.com/package/%40exodus/react-native-splash-screen/#readme-%E6%BC%94%E7%A4%BA)
-   [使用说明](https://npmcn.com/package/%40exodus/react-native-splash-screen/#readme-%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E)
-   [API](https://npmcn.com/package/%40exodus/react-native-splash-screen/#readme-api)
-   [贡献](https://npmcn.com/package/%40exodus/react-native-splash-screen/#readme-%E8%B4%A1%E7%8C%AE)
-   [改变](https://npmcn.com/package/%40exodus/react-native-splash-screen/#readme-%E6%94%B9%E5%8F%98)

## 演示

-   [Examples](https://github.com/crazycodeboy/react-native-splash-screen/tree/master/examples)

![react-native-splash-screen-Android](https://raw.githubusercontent.com/crazycodeboy/react-native-splash-screen/v3.0.0/examples/Screenshots/react-native-splash-screen-Android.gif) ![react-native-splash-screen-iOS](https://raw.githubusercontent.com/crazycodeboy/react-native-splash-screen/v3.0.0/examples/Screenshots/react-native-splash-screen-iOS.gif)

## 改变

如果你项目的React Native>=0.47.请使用[v3.+](https://github.com/crazycodeboy/react-native-splash-screen/releases), 如果<0.47.0请使用[v2.1.0](https://github.com/crazycodeboy/react-native-splash-screen/releases/tag/v1.0.9)。

## 安装说明

### 第一步(下载):

在项目根目录打开终端运行 `npm i react-native-splash-screen --save`

### 第二步 (安装):

大家可以通过自动或手动两种方式来安装`react-native-splash-screen`。

#### 自动安装

终端运行：

`react-native link react-native-splash-screen` 或 `rnpm link react-native-splash-screen`

#### 手动安装

**Android:**

1.在你的 android/settings.gradle 文件中添加下列代码:

```
include ':react-native-splash-screen'   
project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
```

2.在你的 android/app/build.gradle 文件中添加 `:react-native-splash-screen`：

代码如下：

```
...
dependencies {
    ...
    implementation project(':react-native-splash-screen')
}
```

3.更新你的MainApplication.java 文件，如下:

```java
public class MainApplication extends Application implements ReactApplication {

    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
        @Override
        protected boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

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

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }
}
```

**iOS:**

1.  在 XCode的项目导航视图中单击 `Libraries` ➜ `Add Files to [your project's name]`
    
2.  将 `SplashScreen.xcodeproj`添加到你的项目中,`node_modules` ➜ `react-native-splash-screen` ➜ `SplashScreen.xcodeproj`
    
3.  在XCode中打开`Build Phases` ➜ `Link Binary With Libraries`将`libSplashScreen.a` 添加到你的项目中。
    
4.  如果在使用过过程中出现 `'SplashScreen.h' file not found`问题,你可以下面的代码添加到Header Search Paths中,步骤如下:
    

选择你的项目,TARGET → Build Settings → Search Paths → Header Search Paths 添加:

```
  `$(SRCROOT)/../node_modules/react-native-splash-screen/ios`
```

### 第三步(配置):

**Android:**

更新你的 MainActivity.java 文件如下：

```java
public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // 添加这一句
        super.onCreate(savedInstanceState);
    }
    // ...other code
}
```

**iOS:**

更新你的AppDelegate.m 文件如下：

```obj-c
#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "RNSplashScreen.h"  // 添加这一句

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...other code

    [RNSplashScreen show];  // 添加这一句，这一句一定要在最后
    return YES;
}

@end

```

## 使用说明

将 `react-native-splash-screen` 导入你的JS 文件。

`import SplashScreen from 'react-native-splash-screen'`

**Android:**

创建一个名为 launch\_screen.xml 的布局文件来自定义你的启动屏幕。

```
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/launch_screen">
</LinearLayout>
```

**另外:**

你也可以启用app主题透明选项来解决在APP启动时因主题原因导致的短暂白屏的问题,具体步骤如下:

打开 `android/app/src/main/res/values/styles.xml`文件,添加 `<item name="android:windowIsTranslucent">true</item>`,如下 :

```xml
<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <!--设置透明背景-->
        + <item name="android:windowIsTranslucent">true</item>
    </style>
</resources>
```

**更详细的介绍，可以查看 [examples](https://github.com/crazycodeboy/react-native-splash-screen/tree/master/examples)**

**iOS**

iOS可以通过LaunchImage或LaunchScreen.xib来自定义你的启动屏幕。

**更详细的介绍，可以查看 [examples](https://github.com/crazycodeboy/react-native-splash-screen/tree/master/examples)**

最后，你可以在适当的时候关闭启动屏幕（如：启动初始化完成后）:

```JavaScript
import SplashScreen from 'react-native-splash-screen'

export default class WelcomePage extends Component {

    componentDidMount() {
         // do anything while splash screen keeps, use await to wait for an async task.
        SplashScreen.hide();//关闭启动屏幕
    }
}
```

## API

| 方法 | 类型 | 可选 | 描述 |
| --- | --- | --- | --- |
| show()   | function | false | 打开启动屏幕(原生方法) |
| hide() | function | false | 关闭启动屏幕 |

## 贡献

欢迎大家提问题，如果能给问题加上一个截图，则是极好的。另外欢迎`Pull requests`贡献你的代码。

* * *

**MIT Licensed**

## 常见问题

### @exodus/react-native-splash-screen 是什么？

用于反应的喷出屏幕, 当应用程序装入时隐藏, 它工作在iOS和Android上\.

### 如何安装 @exodus/react-native-splash-screen？

在项目目录运行 npm install @exodus/react-native-splash-screen，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react-native（\>=0\.57\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @exodus/react-native-splash-screen 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @exodus/react-native-splash-screen 可以商用吗？

@exodus/react-native-splash-screen 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @exodus/react-native-splash-screen 的下载量有多少？

根据 npm 官方下载统计，@exodus/react-native-splash-screen 在 2026/10/14 – 2026/11/12 这 30 天内被下载 10,639 次，日均约 355 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @exodus/react-native-splash-screen 还在维护吗？

最新版本 6\.0\.2 发布于 2026/01/29（9 个月前）；至今共发布 30 个版本，其中过去 12 个月发布了 3 个；首次发布于 2019/04/09。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。