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

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を編集する