どのように反応ネイティブアプリにスプラッシュ画面を追加する-簡単な方法

スプラッシュ画面は、ユーザーがアプリケーションのアイコンをタップした後に表示される最初の画面です.それは典型的にあなたのアプリケーションのロゴを中心に簡単な画面であり、アプリが起動する準備ができたら離れて行く.
あなたのアプリケーションにスプラッシュ画面を追加するための2つの人気のあるパッケージがあります.すなわちreact-native-splash-screen and expo-splash-screen . それらの両方が働く間、問題は彼らがインストールして、コントロールするのが複雑であるということです.スプラッシュスクリーンを追加するための非常に簡単な方法があり、私はどのように表示するつもりです.
アイデアは、ネイティブコードからJavaScriptにスプラッシュ画面を移動することです.これはレンダリングにより多くの制御を与えるでしょう、加えて、我々は両方のプラットホームでスプラッシュスクリーンを合わせることができます.私たちは何かをするつもりです.

ネイティブの側に空白、単一の色のスプラッシュ画面の背景を設定する

IOSでは、その同じ色に反応ネイティブルートビューの背景色を設定します

とすぐにネイティブの負荷に反応すると、ネイティブの反応と同じ色でビューを追加し、それにアプリのロゴでフェード

一度アプリの負荷は、スプラッシュ画面をフェードアウト

アイデアは、アプリの起動中に同じ色の画面を表示し、ネイティブの初期化反応.これは典型的には本当に短い.その後、我々は我々の反応ネイティブコードからスプラッシュ画面でフェードスプラッシュ画面が表示されている間、我々はアプリを初期化することができます、資産、負荷設定ファイル、およびその他すべてを取得することができます.
最終的な製品は次のようになります.

アプリスプラッシュ画面

必要条件
背景色を選択し、範囲0 - 1で16進数値とRGB値を取得します.私の例では#E0B9BB . RGB値は0.87843、0.72549、0.73333です.使えますthis converter 簡単にRGB値を取得します.
今スプラッシュ画面の中央に表示される画像を選択します.これは、ロゴやアプリのアイコンや何か他のことができます.私の場合は猫のPNGです.

IOSで空白の背景を設定する
オープンAppDelegate.m 行を変更する

  if (@available(iOS 13.0, *)) {
      rootView.backgroundColor = [UIColor systemBackgroundColor];
  } else {
      rootView.backgroundColor = [UIColor whiteColor];
  }

簡単に言う

rootView.backgroundColor = [UIColor colorWithRed:0.87843 green:0.72549 blue:0.73333 alpha:1.0];

あなたの色に合わせてRGB値を変更してください.
これは、反応のネイティブルートビューの背景色を変更しましたが、我々はまだ全体のアプリの背景を変更する必要があります.Xcodeを通してこのステップを行うことができましたが、テキストエディタを使うのが速いとわかります.単にあなたのios/<AppName>/LaunchScreen.storyboard ファイル

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="19529" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
    <device id="retina4_7" orientation="portrait" appearance="light"/>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="19519"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <scenes>
        <!--View Controller-->
        <scene sceneID="EHf-IW-A2E">
            <objects>
                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
                    <view key="view" autoresizesSubviews="NO" opaque="NO" clearsContextBeforeDrawing="NO" userInteractionEnabled="NO" contentMode="scaleToFill" id="1L6-XZ-uwR">
                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                        <viewLayoutGuide key="safeArea" id="VQL-mw-5y0"/>
                        <color key="backgroundColor" red="0.87843" green="0.72549" blue="0.73333" alpha="1" colorSpace="calibratedRGB"/>
                    </view>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="22" y="100"/>
        </scene>
    </scenes>
</document>

で始まる行を変更しなければならないことに注意してください<color key="backgroundColor" とRGB値を自分で置き換えます.
この時点でアプリケーションを実行する場合は、選択した背景色が表示されます.

空白の背景アプリ

Androidで空白の背景を設定する
Androidでは、次の行を追加しますandroid/app/src/main/res/values/styles.xml ファイルの内部<style> あなたのアプリケーションのテーマのタグ:

<item name="android:windowBackground">#E0B9BB</item>

ファイルは次のようになります.

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="android:windowBackground">#E0B9BB</item>
    </style>
</resources>

JS部
さあ、追加しましょうSplash コンポーネント.次のように動作します.

最初に、それは我々が選んだ背景色で空白のビューのみを示しています.スプラッシュスクリーンイメージがメモリにロードされるまで、これは目に見える

イメージフェードイン

アプリが初期化され、実行する準備が整うまで、我々はこの状態で待ちます

全体のスプラッシュ画面がフェードアウト、アプリの最初の画面を明らかに

最後に、スプラッシュスクリーンの資産がクリーンアップされます

import React, { useEffect, useRef, useState } from "react";
import { Animated, StyleSheet } from "react-native";

export function WithSplashScreen({
  children,
  isAppReady,
}: {
  isAppReady: boolean;
  children: React.ReactNode;
}) {
  return (
    <>
      {isAppReady && children}

      <Splash isAppReady={isAppReady} />
    </>
  );
}

const LOADING_IMAGE = "Loading image";
const FADE_IN_IMAGE = "Fade in image";
const WAIT_FOR_APP_TO_BE_READY = "Wait for app to be ready";
const FADE_OUT = "Fade out";
const HIDDEN = "Hidden";

export const Splash = ({ isAppReady }: { isAppReady: boolean }) => {
  const containerOpacity = useRef(new Animated.Value(1)).current;
  const imageOpacity = useRef(new Animated.Value(0)).current;

  const [state, setState] = useState<
    | typeof LOADING_IMAGE
    | typeof FADE_IN_IMAGE
    | typeof WAIT_FOR_APP_TO_BE_READY
    | typeof FADE_OUT
    | typeof HIDDEN
  >(LOADING_IMAGE);

  useEffect(() => {
    if (state === FADE_IN_IMAGE) {
      Animated.timing(imageOpacity, {
        toValue: 1,
        duration: 1000, // Fade in duration
        useNativeDriver: true,
      }).start(() => {
        setState(WAIT_FOR_APP_TO_BE_READY);
      });
    }
  }, [imageOpacity, state]);

  useEffect(() => {
    if (state === WAIT_FOR_APP_TO_BE_READY) {
      if (isAppReady) {
        setState(FADE_OUT);
      }
    }
  }, [isAppReady, state]);

  useEffect(() => {
    if (state === FADE_OUT) {
      Animated.timing(containerOpacity, {
        toValue: 0,
        duration: 1000, // Fade out duration
        delay: 1000, // Minimum time the logo will stay visible
        useNativeDriver: true,
      }).start(() => {
        setState(HIDDEN);
      });
    }
  }, [containerOpacity, state]);

  if (state === HIDDEN) return null;

  return (
    <Animated.View
      collapsable={false}
      style={[style.container, { opacity: containerOpacity }]}
    >
      <Animated.Image
        source={require("~/assets/splash.png")}
        fadeDuration={0}
        onLoad={() => {
          setState(FADE_IN_IMAGE);
        }}
        style={[style.image, { opacity: imageOpacity }]}
        resizeMode="contain"
      />
    </Animated.View>
  );
};

const style = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: '#E0B9BB',
    alignItems: "center",
    justifyContent: "center",
  },
  image: {
    width: 250,
    height: 250,
  },
});

あなたのプロジェクトに一致するように色と画像の資産へのパスを変更する必要があります.
あなたがそれが必要であると感じるならば、あなたはスプラッシュスクリーンにより多くの内容を加えることができました.
最後に、我々は実際に我々のアプリでこのコンポーネントを使用する必要があります.私のアプリケーションエントリポイントはこのように見えます.アイデアは、アプリケーションのエントリポイントをラップすることですWithSplashScreen コンポーネントと一度アプリケーションが初期化され、設定isAppReady プロップtrue .

export function AppEntry() {
  const store = useRef(undefined);
  const queryClient = useRef(undefined);

  const [isAppReady, setIsAppReady] = useState(false);

  useEffect(() => {
    initialize().then((context) => {
      store.current = context.store;
      queryClient.current = context.queryClient;

      setIsAppReady(true);
    });
  }, []);

  return (
    <WithSplashScreen isAppReady={isAppReady}>
      <StoreProvider store={store.current}>
        <QueryClientProvider client={queryClient.current}>
          <SafeAreaProvider>
            <KeyboardAvoidingView>
              <ModalProvider>
                <Router />
              </ModalProvider>
            </KeyboardAvoidingView>
          </SafeAreaProvider>
        </QueryClientProvider>
      </StoreProvider>
    </WithSplashScreen>
  );
}

あなたがすべてを正しくするならば、結果は以下のように見えなければなりません:

アプリスプラッシュ画面

結論
代わりに制御するのは難しい複雑なネイティブの依存関係を追加すると、簡単にネイティブ側の変更のカップルを使用してアプリケーションにスプラッシュ画面を追加するのは簡単です.利点として、どのようにスプラッシュ画面を見て行動する余分な制御を得る.
この記事を読んでくれてありがとう!あなたがそれが役に立つとわかるならば、好みと共有を考えてください.
Lloyds digital パートナーシップで利用可能で、新しいプロジェクトを開きます.あなたが我々についてより多くを知っていたいならば、我々をチェックしてください.