npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

aloestec-rn-splash-screen

v1.0.1

Published

A splash screen for react-native, hide when application loaded ,it works on iOS and Android.

Downloads

5

Readme

react-native-splash-screen

Download PRs Welcome react-native-splash-screen release language English License MIT 原理 解析

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

目录

演示

react-native-splash-screen-Android react-native-splash-screen-iOS

改变

如果你项目的React Native>=0.47.请使用v3.+, 如果<0.47.0请使用v2.1.0

安装说明

第一步(下载):

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

第二步 (安装):

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

自动安装

终端运行:

react-native link react-native-splash-screenrnpm 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 {
    ...
    compile project(':react-native-splash-screen')
}

3.更新你的MainApplication.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的项目导航视图中单击 LibrariesAdd Files to [your project's name]

  2. SplashScreen.xcodeproj添加到你的项目中,node_modulesreact-native-splash-screenSplashScreen.xcodeproj

  3. 在XCode中打开Build PhasesLink Binary With LibrarieslibSplashScreen.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 文件如下:

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

iOS:

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


#import "AppDelegate.h"
#import "RCTRootView.h"
#import "SplashScreen.h"  // here

@implementation AppDelegate

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

    [SplashScreen 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>,如下 :

<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

iOS

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

更详细的介绍,可以查看 examples

最后,你可以在适当的时候关闭启动屏幕(如:启动初始化完成后):

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