ReactNativeでスプラッシュスクリーンをいい感じに出す

RNスプラッシュスクリーンの作り方

React、iOS、Android開発未経験の覚書です。
間違えている可能性もあります。
その時は編集リクエストかコメントで教えてください。

モジュール公式を日本語で噛み砕いたような感じです。
詳しくはモジュールのgithubへ
https://github.com/crazycodeboy/react-native-splash-screen

拡張モジュールを導入

npm i react-native-splash-screen --save
react-native link react-native-splash-screen

各OSのネイティブコードをちょっと修正する

Android

MainActivity.java

import com.facebook.react.ReactActivity;

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);
    }
    // ...other code
}

iOS

AppDelegate.m

#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

起動後のscreenとなる所でスプラッシュスクリーンを非表示にする

App.js

export default class App extends Component<Props> {

// コンポーネントをマウントできたらスプラッシュを消す
  componentDidMount() {
    SplashScreen.hide();
  }

// other

StatusBarとメイン背景の色を同色にする

App.js

// other
  render() {
    return (
      <View style={styles.container}>
        <StatusBar barStyle="light-content" backgroundColor="#212121" /> //　追記
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#212121' //　ステータスバーと色を合わせる
  },
  // other

各OS毎にスプラッシュスクリーンを設定する

Android

app/src/main/res/layout/launch_screen.xmlを配置する

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/src/main/res/配下にdrawableフォルダを配置する

• drawable-xhdpi
• drawable-xxhdpi

中にlaunch_screen.pngでスプラッシュ画像を置いておく

iOS

XcodeでlaunchScreen.xibを編集する