{"_id":"@2060.io/react-native-splash-screen","_rev":"1-69c0b8afc89ef383e95c1657901c90f4","name":"@2060.io/react-native-splash-screen","dist-tags":{"latest":"3.3.2"},"versions":{"3.3.1":{"name":"@2060.io/react-native-splash-screen","version":"3.3.1","keywords":["react-native","react-native-component","react-native-splash-screen","splash-screen","splashscreen","splash","launch-screen","launchscreen","android","ios"],"author":{"name":"2060.io"},"license":"MIT","_id":"@2060.io/react-native-splash-screen@3.3.1","maintainers":[{"name":"genaris","email":"gentilester@gmail.com"}],"homepage":"https://github.com/2060-io/react-native-splash-screen#readme","bugs":{"url":"https://github.com/2060-io/react-native-splash-screen/issues"},"dist":{"shasum":"2d2ec5c896bb6482e01502756d5da99d9250c86b","tarball":"https://registry.npmjs.org/@2060.io/react-native-splash-screen/-/react-native-splash-screen-3.3.1.tgz","fileCount":26,"integrity":"sha512-WtYQQ9BNmb5NHyo4cwSplDRw4KT5P7KoI8eW/x8nDT9MCaBHIH0pQfI9sPT087GHComdJmG60Drmz+1yBvYBiA==","signatures":[{"sig":"MEYCIQDm0WB3qFhbknJx9thJfJRFy8tIpMIkHWddqdwkWXr1VgIhAN8RhlLH1qoeRDZr7cO8cdH6v9Llp8I13yRo95417G4R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":37423},"main":"index.js","types":"./index.d.ts","gitHead":"e3a1c1edfb542ea67d0f01c4a5285b68cd0d092a","scripts":{"test":"echo \"Error: no test specified\" && exit 1","release":"release-it"},"_npmUser":{"name":"genaris","email":"gentilester@gmail.com"},"release-it":{"git":{"push":false,"commit":false,"requireBranch":"master","tagAnnotation":"${version}","requireCommits":true},"npm":{"tag":"latest","skipChecks":true,"ignoreVersion":true},"github":{"release":true}},"repository":{"url":"git+https://github.com/2060-io/react-native-splash-screen.git","type":"git"},"_npmVersion":"10.9.0","description":"A splash screen for react-native, hide when application loaded ,it works on iOS and Android.","directories":{},"_nodeVersion":"20.12.2","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"peerDependencies":{"react-native":">=0.57.0"},"_npmOperationalInternal":{"tmp":"tmp/react-native-splash-screen_3.3.1_1734662826496_0.7548832828765379","host":"s3://npm-registry-packages-npm-production"}},"3.3.2":{"name":"@2060.io/react-native-splash-screen","version":"3.3.2","description":"A splash screen for react-native, hide when application loaded ,it works on iOS and Android.","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1","release":"release-it"},"repository":{"type":"git","url":"git+https://github.com/2060-io/react-native-splash-screen.git"},"keywords":["react-native","react-native-component","react-native-splash-screen","splash-screen","splashscreen","splash","launch-screen","launchscreen","android","ios"],"author":{"name":"2060.io"},"license":"MIT","bugs":{"url":"https://github.com/2060-io/react-native-splash-screen/issues"},"peerDependencies":{"react-native":">=0.57.0"},"homepage":"https://github.com/2060-io/react-native-splash-screen#readme","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"release-it":{"github":{"release":true},"npm":{"skipChecks":true,"ignoreVersion":true,"tag":"latest"},"git":{"push":false,"commit":false,"requireCommits":true,"tagAnnotation":"${version}","requireBranch":"master"}},"_id":"@2060.io/react-native-splash-screen@3.3.2","gitHead":"5b8da57dae06086a10243917d8cedc2321cfa59c","types":"./index.d.ts","_nodeVersion":"20.12.2","_npmVersion":"10.9.0","dist":{"integrity":"sha512-3GEksuMUmA1p0XQ6UlCe+jrR/FJpNnrBVPSAb+y0coDiEbWBnKCiYYwnhzEhC/5HYHBhTlFXkWv4d4rUQJ54Vw==","shasum":"4ae7c09cc348fec3b079c874b0d88826de06a5e7","tarball":"https://registry.npmjs.org/@2060.io/react-native-splash-screen/-/react-native-splash-screen-3.3.2.tgz","fileCount":26,"unpackedSize":37214,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsVoFjkzzN91NDTRFUax2e8gkWgtmUPjxciITJI5DAUAIhAI/d/MecZQroRSmMrz4/QAxBncEJLhPTMRe9znDV3WHl"}]},"_npmUser":{"name":"genaris","email":"gentilester@gmail.com"},"directories":{},"maintainers":[{"name":"genaris","email":"gentilester@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/react-native-splash-screen_3.3.2_1734728822039_0.21980816506586742"},"_hasShrinkwrap":false}},"time":{"created":"2024-12-20T02:47:06.403Z","modified":"2024-12-20T21:07:02.473Z","3.3.1":"2024-12-20T02:47:06.732Z","3.3.2":"2024-12-20T21:07:02.241Z"},"bugs":{"url":"https://github.com/2060-io/react-native-splash-screen/issues"},"author":{"name":"2060.io"},"license":"MIT","homepage":"https://github.com/2060-io/react-native-splash-screen#readme","keywords":["react-native","react-native-component","react-native-splash-screen","splash-screen","splashscreen","splash","launch-screen","launchscreen","android","ios"],"repository":{"type":"git","url":"git+https://github.com/2060-io/react-native-splash-screen.git"},"description":"A splash screen for react-native, hide when application loaded ,it works on iOS and Android.","maintainers":[{"name":"genaris","email":"gentilester@gmail.com"}],"readme":"# react-native-splash-screen\n\n[![Download](https://img.shields.io/badge/Download-v3.1.1-ff69b4.svg) ](https://www.npmjs.com/package/react-native-splash-screen)\n[ ![PRs Welcome](https://img.shields.io/badge/PRs-Welcome-brightgreen.svg)](https://github.com/crazycodeboy/react-native-splash-screen/pulls)\n[ ![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)\n[ ![language English](https://img.shields.io/badge/language-English-feb252.svg)](https://github.com/crazycodeboy/GitHubPopular/)\n[![License MIT](http://img.shields.io/badge/license-MIT-orange.svg?style=flat)](https://raw.githubusercontent.com/crazycodeboy/react-native-check-box/master/LICENSE)\n[ ![原理 解析](https://img.shields.io/badge/原理-解析-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)\n\n\n\nReact Native启动屏，解决iOS，Android启动白屏问题，支持Android和iOS。\n\n## 目录\n\n- [安装说明](#安装说明)\n- [演示](#演示)\n- [使用说明](#使用说明)\n- [API](#api)\n- [贡献](#贡献)\n- [改变](#改变)\n\n## 演示\n* [Examples](https://github.com/crazycodeboy/react-native-splash-screen/tree/master/examples)\n\n![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)\n![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)\n\n\n## 改变\n\n如果你项目的React Native>=0.47.请使用[v3.+](https://github.com/crazycodeboy/react-native-splash-screen/releases),\n如果<0.47.0请使用[v2.1.0](https://github.com/crazycodeboy/react-native-splash-screen/releases/tag/v1.0.9)。\n\n## 安装说明\n\n### 第一步(下载):\n在项目根目录打开终端运行 `npm i react-native-splash-screen --save`\n\n### 第二步 (安装):\n\n大家可以通过自动或手动两种方式来安装`react-native-splash-screen`。\n\n\n#### 自动安装\n\n终端运行：\n\n\n`react-native link react-native-splash-screen` 或 `rnpm link react-native-splash-screen`\n\n####  手动安装\n\n**Android:**\n\n1.在你的 android/settings.gradle 文件中添加下列代码:\n```\ninclude ':react-native-splash-screen'\nproject(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')\n```\n\n2.在你的 android/app/build.gradle 文件中添加 `:react-native-splash-screen`：\n\n代码如下：\n\n```\n...\ndependencies {\n    ...\n    implementation project(':react-native-splash-screen')\n}\n```\n\n3.更新你的MainApplication.java 文件，如下:\n\n```java\npublic class MainApplication extends Application implements ReactApplication {\n\n    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {\n        @Override\n        protected boolean getUseDeveloperSupport() {\n            return BuildConfig.DEBUG;\n        }\n\n        @Override\n        protected List<ReactPackage> getPackages() {\n            return Arrays.<ReactPackage>asList(\n                    new MainReactPackage(),\n            new SplashScreenReactPackage()  //添加这一句\n            );\n        }\n    };\n\n    @Override\n    public ReactNativeHost getReactNativeHost() {\n        return mReactNativeHost;\n    }\n}\n```\n\n**iOS:**\n\n1. 在 XCode的项目导航视图中单击 `Libraries` ➜ `Add Files to [your project's name]`\n2. 将 `SplashScreen.xcodeproj`添加到你的项目中,`node_modules` ➜ `react-native-splash-screen`  ➜ `SplashScreen.xcodeproj`\n\n3.  在XCode中打开`Build Phases` ➜ `Link Binary With Libraries`将`libSplashScreen.a` 添加到你的项目中。\n4.  如果在使用过过程中出现 `'SplashScreen.h' file not found`问题,你可以下面的代码添加到Header Search Paths中,步骤如下:\n\n\n选择你的项目,TARGET  → Build Settings → Search Paths → Header Search Paths 添加:\n\n      `$(SRCROOT)/../node_modules/react-native-splash-screen/ios`\n\n\n### 第三步(配置):\n\n**Android:**\n\n更新你的 MainActivity.java 文件如下：\n```java\npublic class MainActivity extends ReactActivity {\n   @Override\n    protected void onCreate(Bundle savedInstanceState) {\n        SplashScreen.show(this);  // 添加这一句\n        super.onCreate(savedInstanceState);\n    }\n    // ...other code\n}\n```\n\n**iOS:**\n\n更新你的AppDelegate.m 文件如下：\n\n\n```obj-c\n#import \"AppDelegate.h\"\n\n#import <React/RCTBundleURLProvider.h>\n#import <React/RCTRootView.h>\n#import \"RNSplashScreen.h\"  // 添加这一句\n\n@implementation AppDelegate\n\n- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions\n{\n    // ...other code\n\n    [RNSplashScreen show];  // 添加这一句，这一句一定要在最后\n    return YES;\n}\n\n@end\n\n```\n\n\n## 使用说明\n\n将 `react-native-splash-screen` 导入你的JS 文件。\n\n\n`import SplashScreen from 'react-native-splash-screen'`\n\n**Android:**\n\n创建一个名为 launch_screen.xml 的布局文件来自定义你的启动屏幕。\n\n```\n<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<LinearLayout xmlns:android=\"http://schemas.android.com/apk/res/android\"\n    android:orientation=\"vertical\" android:layout_width=\"match_parent\"\n    android:layout_height=\"match_parent\"\n    android:background=\"@drawable/launch_screen\">\n</LinearLayout>\n```\n\n**另外:**\n\n你也可以启用app主题透明选项来解决在APP启动时因主题原因导致的短暂白屏的问题,具体步骤如下:\n\n打开 `android/app/src/main/res/values/styles.xml`文件,添加 `<item name=\"android:windowIsTranslucent\">true</item>`,如下 :\n\n```xml\n<resources>\n    <!-- Base application theme. -->\n    <style name=\"AppTheme\" parent=\"Theme.AppCompat.Light.NoActionBar\">\n        <!-- Customize your theme here. -->\n        <!--设置透明背景-->\n        + <item name=\"android:windowIsTranslucent\">true</item>\n    </style>\n</resources>\n```\n\n\n**更详细的介绍，可以查看 [examples](https://github.com/crazycodeboy/react-native-splash-screen/tree/master/examples)**\n\n**iOS**\n\niOS可以通过LaunchScreen.storyboard或LaunchScreen.xib来自定义你的启动屏幕。\n\n**更详细的介绍，可以查看 [examples](https://github.com/crazycodeboy/react-native-splash-screen/tree/master/examples)**\n\n最后，你可以在适当的时候关闭启动屏幕（如：启动初始化完成后）:\n\n```JavaScript\nimport SplashScreen from 'react-native-splash-screen'\n\nexport default class WelcomePage extends Component {\n\n    componentDidMount() {\n    \t // do anything while splash screen keeps, use await to wait for an async task.\n        SplashScreen.hide();//关闭启动屏幕\n    }\n}\n```\n\n## API\n\n\n方法            | 类型     | 可选 | 描述\n----------------- | -------- | -------- | -----------\nshow()   | function | false | 打开启动屏幕(原生方法)\nhide() |  function  | false  |  关闭启动屏幕\n\n## 贡献\n\n欢迎大家提问题，如果能给问题加上一个截图，则是极好的。另外欢迎`Pull requests`贡献你的代码。\n\n---\n\n**MIT Licensed**\n","readmeFilename":"README.zh.md"}