ネイティブ Android 起動ページに反応する

インストール

最初のステップ (ダウンロード):

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

アンドロイド：

ファイルに 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 コンパイル時の依存関係としてプロジェクトを追加します。

...
依存関係 { 
    ...
    実装プロジェクト(':react-native-splash-screen') 
}

react-native-splash-screen 次の変更を介して、MainApplication.java ファイルを更新して使用します。

// 反応ネイティブスプラッシュスクリーン >= 0.3.1 
import org.devio.rn.splashscreen.SplashScreenReactPackage; 
// 反応ネイティブスプラッシュスクリーン < 0.3.1 
import com.cboy.rn.splashscreen.SplashScreenReactPackage; 

public class MainApplication extends Applicationimplements 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() //ここで 
            );
        } 
    }; 

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

3 番目のステップ (プラグイン設定):

アンドロイド：

次の変更を介して、MainActivity.java 使用するようにを更新します。react-native-splash-screen

android.os.Bundle をインポートします。// ここで
com.facebook.react.ReactActivityをインポートします。
// 反応ネイティブスプラッシュスクリーン >= 0.3.1 
import org.devio.rn.splashscreen.SplashScreen; // ここで
// 反応ネイティブ-スプラッシュスクリーン < 0.3.1 
import com.cboy.rn.splashscreen.SplashScreen; // ここでは

public class MainActivity extends ReactActivity { 
   @Override 
    protected void onCreate(Bundle SavedInstanceState) { 
        SplashScreen.show(this); // ここでは
        super.onCreate(savedInstanceState); 
    } 
    // ...他のコード
}

入門

react-native-splash-screen JS ファイルにインポートします。

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

アンドロイド：

launch_screen.xml という名前のファイルを作成します app/src/main/res/layout ( layout-フォルダーが存在しない場合は作成します)。ファイルの内容は次のようになります。

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" android:layout_width ="match_parent" 
    android:layout_height="match_parent"> 
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" /> </ 
RelativeLayout >

launch_screen.pngファイルを作成し、適切なフォルダーに配置することで、起動画面をカスタマイズします drawable。Android はドローアブルを自動的にスケーリングするため、すべての携帯電話の密度に対応する画像を必ずしも提供する必要はありません。スプラッシュスクリーンは次のフォルダーに作成できます。

drawable-ldpi
drawable-mdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
drawable-xxxhdpi

primary_dark 呼び出された色を追加します app/src/main/res/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary_dark">#000000</color>
</resources>

オプションの手順：

スプラッシュスクリーンを透明にしたい場合は、次の手順に従います。

ファイルを開いて android/app/src/main/res/values/styles.xml 追加します。<item name="android:windowIsTranslucent">true</item>次のようになります。

<resources> 
    <!-- 基本アプリケーションのテーマ。--> 
    <style name="AppTheme"parent="Theme.AppCompat.Light.NoActionBar"> 
        <!-- ここでテーマをカスタマイズします。--> 
        <!--设置透明背景--> 
        <item name="android:windowIsTranslucent">true</item> 
    </style> 
</resources>

詳細については、例を参照してください

スプラッシュ画面が表示されるときのステータスバーの色をカスタマイズする場合は、次の手順を実行します。

作成し android/app/src/main/res/values/colors.xml て追加する

<?xml version="1.0"coding="utf-8"?> 
<resources> 
    <color name="status_bar_color"><!-- ステータス バーの色をここに指定します --></color> 
</resources>

このためのスタイル定義を次のように作成します android/app/src/main/res/values/styles.xml。

<?xml version="1.0"coding="utf-8"?> 
<resources> 
    <style name="SplashScreenTheme"parent="SplashScreen_SplashTheme"> 
        <item name="colorPrimaryDark">@color/status_bar_color</item> 
    < /スタイル> 
</リソース>

show カスタムスタイルを含めるようにメソッドを変更します。

SplashScreen.show(this, R.style.SplashScreenTheme);

使用法

次のように使用します。

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

エクスポート デフォルト クラス WelcomePage extends Component { 

    componentDidMount() { 
    	// スプラッシュ スクリーンが表示されている間に処理を実行します
        // 処理 (非同期タスクなど) を実行した後、スプラッシュ スクリーンを非表示にします SplashScreen 
        。隠れる（）; 
    } 
}

API

方法	タイプ	オプション	説明
見せる（）	関数	間違い	スプラッシュ画面を開く (ネイティブメソッド)
show(最終アクティビティアクティビティ、最終ブール値フルスクリーン)	関数	間違い	スプラッシュ画面を開く (ネイティブメソッド)
隠れる（）	関数	間違い	スプラッシュ画面を閉じる

テスト

は

Jest が機能するには、このコンポーネントをモックする必要があります。以下に例を示します。

// __mocks__/react-native-splash-screen.js
export default {
  show: jest.fn().mockImplementation( () => { console.log('show splash screen'); } ),
  hide: jest.fn().mockImplementation( () => { console.log('hide splash screen'); } ),
}

トラブルシューティング

スプラッシュ画面が常に引き伸ばされたり歪んで見えたりする

に、scaleType を指定して ImageView を追加します launch_screen.xml。例:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
>
  <ImageView 
    android:src="@drawable/launch_screen"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
  >
  </ImageView>
</FrameLayout>

貢献

問題は大歓迎です。バグのスクリーンショットとコードスニペットを追加してください。問題を解決する最も簡単な方法は、例の 1 つで問題を再現することです。

プルリクエストは大歓迎です。API を変更したい場合、または何か大きなことをしたい場合は、まず問題を作成して議論することをお勧めします。