前言

react-native在启动的时候会有瞬间的白屏出现，ios白屏时间会很短，安卓要相对长一些，大概1-3s时间。这是react-native的工作机制决定的。 react-native在启动时会装载js bundle到内存并渲染界面，这段时间界面是一个空View。这种体验显然是非常不好的，所以我们需要一个启动页来延缓这个过程从而提高用户体验。

既然想法有了，让我们来分析一下这个过程，由于是在加载js bundle，所以我们就得从原生程序来解决这个问题，让点击app图标后，第一时间打开一个友好的启动页面，之后监听js bundle的状态，如果js bundle开始运行我们就关闭这个启动页面。看起来思路并不难，但是对于没有写过原生程序的web前端工程师来说确实有些难度。那么该如何解决呢？这里推荐一个第三方组件 react-native-splash-screen 它帮我们封装了大部分配置，我们需要做部分的集成就可以使用。

下载 react-native-splash-screen

安装还是一如既往的使用npm或者yarn

yarn react-native-splash-screen
# or npm
npm i react-native-splash-screen -S

自动安装

react-native link react-native-splash-screen

手动安装

Android:

在您的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')

在您的android / app / build.gradle文件中，添加：react-native-splash-screen项目作为编译时依赖项：

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

通过以下更改更新MainApplication.java文件以使用react-native-splash-screen：

// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreenReactPackage;
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreenReactPackage;

public class MainApplication extends Application implements ReactApplication {

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

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
            new SplashScreenReactPackage()  //here
            );
        }
    };

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

ios

方法一：执行下面的命令

cd ios
run pod install

方法二：

在Xcode项目目录中的Libraries文件夹上右键 ➜ Add Files to [your project's name]
到 node_modules ➜ react-native-splash-screen ➜ ios ➜ 选择 SplashScreen.xcodeproj
In XCode, in the project navigator, select your project. Add libSplashScreen.a to your project's Build Phases ➜ Link Binary With Libraries
To fix 'RNSplashScreen.h' file not found, you have to select your project → Build Settings → Search Paths → Header Search Paths to add: $(SRCROOT)/../node_modules/react-native-splash-screen/ios

配置插件

Android

通过以下更改更新MainActivity.java以使用react-native-splash-screen：

import android.os.Bundle; // here
import com.facebook.react.ReactActivity;
// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; // here
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreen; // here

public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);  // here
        super.onCreate(savedInstanceState);
    }
    // ...other code
}

iOS:

更新AppDelegate.m：

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "RNSplashScreen.h"  // here

@implementation AppDelegate

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

    [RNSplashScreen show];  // here
    // or
    //[RNSplashScreen showSplash:@"LaunchScreen" inRootView:rootView];
    return YES;
}

@end

各端准备工作

android准备启动画面

步骤如下：

打开MainActivity.java按照下图1，2，3步骤添加启动屏包以及方法：
在 android/app/src/mian/res目录下创建layout文件夹，并在创建的layout文件夹中创建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>

在 android/app/src/mian/res目录下创建drawable-xhdpi文件夹，并添加名为launch_screen.png的图片（其实你要想适配的更全面可以像mipmap一样添加不同分辨率的图片）
需要在android/app/src/main/res/values/styles.xml中添加 true 设置透明背景

<resources>

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

</resources>

ios准备启动画面

通过LaunchScreen.storyboard或LaunchScreen.xib自定义初始屏幕。 LaunchScreen.storyboard教程

开始使用

在js的入口文件中导入 react-native-splash-screen ，并在mount事件中调用SplashScreen.hide()即可。

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

export default class WelcomePage extends Component {

    componentDidMount() {
    	// do stuff while splash screen is shown
        // After having done stuff (such as async tasks) hide the splash screen
        SplashScreen.hide();
    }
}

React-Native 0.63踩坑之旅--react-native如何做启动屏和欢迎页

目录

前言