ios&android启动图

使用第三方库react-native-splash-screen

一、安装

1. package.json添加依赖"react-native-splash-screen": "3.2.0"
2. 添加link脚本react-native 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')

1. android/app/build.gradle

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

1. MainApplication.java

...
import org.devio.rn.splashscreen.SplashScreenReactPackage;
...

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中,步骤如下:

二、 配置

Android ::

1. MainActivity.java

// 添加引用
import android.os.Bundle;
import org.devio.rn.splashscreen.SplashScreen;

public class MainActivity extends ReactActivity {
    ...
    // 添加启动图支持
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // 添加这一句
        super.onCreate(savedInstanceState);
    }
}

1. 创建文件 android/app/src/main/res/layout/launch_screen.xml

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

1. 添加启动图。示例如下，以launch_screen.png命名，不同尺寸的启动图放在不同的图片文件夹内。

IOS ::

1. 使用以下添加项更新AppDelegate.m：

// 添加引用
#import "RNSplashScreen.h";

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

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

1. 双击 Images.xcassets, 文件空白处右键，选择new ios Launch Image

1. 打开LaunchImage，把相应尺寸的启动图拖放到位

1. 设置使用LaunchImage启动图。target - Build Settings - Asset Catalog Launch Image Set Name 然后设置创建的启动页名字即可如下图所示。(注意：填写名字和启动图名字一样)

三、使用说明

在首页的初始化添加一下逻辑

import { IFeidaoAiMobile } from '@dfeidao/atom-mobile/interfaces';
import splash_screen from 'react-native-splash-screen';

export default function a001(fd: IFeidaoAiMobile) {
    // 一般会在这里添加setTimeout
    splash_screen.hide();
}

四、需要的不同的启动图尺寸