スプラッシュスクリーンを追加してネイティブに反応させる方法(Android)

https://medium.com/@rocksinghajay

前回の記事で、スプラッシュスクリーンを追加してネイティブ(IOS)に反応させる方法について書きました。

さて、この記事では、react-native(Android)にスプラッシュを追加する方法を説明します。非常に簡単な手順を説明します。そして、これはすべてのモバイルアプリケーションに対して作成できる非常に初期のことです。したがって、すべての開発者にとって、適切な方法で追加する方法を知ることは非常に重要です。

ここでソースコード全体を表示できます。

スプラッシュスクリーンを追加するために、単純な反応ネイティブプロジェクトを使用しています。それでは、システムの反応ネイティブプロジェクトを初期化することから始めましょう。

反応ネイティブinit SplashScreenReactNative
cd SplashScreenReactNative

これらの2行を端末に実行した後、システム上のネイティブプロジェクトに対応する必要があります。

反応するネイティブアプリケーションに白い背景のスプラッシュスクリーンがあることに気付いた場合。その画面に、カスタムスプラッシュ画面を追加しています。最初の白いスプラッシュスクリーンに気付くには、まずアプリで暗い背景色を設定する必要があります。

App.jsコンポーネントを以下のコードに置き換えます

背景色を濃い赤に、テキストの色を白に置き換えるだけです。

スプラッシュスクリーンをAndroidアプリに追加する

最初にAndroidスタジオでプロジェクトを開きます。

Androidスタジオでプロジェクトを開いた後、android / app / src / main / resフォルダーにあるmipmapフォルダーに移動します。各ピクセル密度は、下のスクリーンショットで見つけることができるフォルダー名に異なる密度が追加されています。

android / app / src / main / res

そして、これは、すべての画像がピクセル密度ミップマップフォルダーに従って移動する場所です

  • mipmap-mdpi = icon.png
  • mipmap-hdpi = icon@2x.png
  • mipmap-xhdpi = icon@3x.png
  • mipmap-xxhdpi = icon@3x.png

ここでAndroid Asset Studioにアイコンを作成すると、すべてのミップマップフォルダー画像が提供されます。

そして、そのすべての画像をミップマップフォルダーに従ってコピーします。

icon.png

次のステップでは、アプリケーションが最初に起動したときに表示されるスプラッシュ画面を作成します。

  1. android / app / src / main / res / drawableにbackground_splash.xmlファイルを作成します。最初にresフォルダーに描画可能なフォルダーが作成される場合があります。

そして、次のコード:

drawable / background_splash.xml

2.次に、android / app / src / main / res / valuesにcolors.xmlファイルを作成し、アプリケーションの赤と同じ赤色を定義します。

そして、次のコード:

android / app / src / main / res / values / colors.xml

次に、android / app / src / main / res / values / styles.xmlでstyles.xmlファイルを開き、次のコードを追加します。

3.次のステップでは、アプリケーションが最初にSplashThemeを起動することを伝えます。そして、AndroidManifest.xmlファイルと 内でそれを行います。

次のコードを追加します。

MainActivityを次のように変更します。 android:exported = "true"を追加し、にコメントしてください

そして、最終的なAndroidManifest.xmlファイルは次のようになります。

4.次のステップでは、android / app / src / main / java / com / SplashActivity.javaにSplashActivity.javaファイルを作成します

SplashActivity.java

アプリケーションを実行して、すべてが正常に機能しているかどうかを確認します。

スプラッシュ画面

そして、それはうまく機能しますが、スプラッシュ画面がロードされた後に問題が発生しました。react-native-splash-screenモジュールを追加してネイティブアプリケーションに反応させることで修正できます。

yarn add react-native-splash-screen@3.0.6
反応ネイティブリンク

次に、アプリケーションでApp.jsを構成します。

スプラッシュスクリーンを追加してネイティブ(ANDROID)に反応させる方法に関するこの記事をお楽しみください。

この記事の有用性を見つけたらif

他の人がMediumで簡単に見つけられるように、この記事を自由にコメントして気に入ってください!

こんにちは、私の名前はAjay Singh Rajputです。私はZestGeekのフロントエンド開発者です。 JavaScriptとreactjsについて書いています。そして、私の世界観をすべての人と共有することで、TwitterまたはMediumで私をフォローして、私のクエストに参加できます。

JavaScript、Reactjs、Lifeについてもっと知りたいですか?私の他の記事をチェックしてください:

そして、この記事を読んでくれたら、友人や敵と共有してくれてありがとう。そして、JavaScript、react.jsについてもっと書いていきます。