ネイティブ統合反応する反応-ネイティブのスプラッシュスクリーンを(アプリケーション図プロモーター)

1):ダウンロードのプラグイン

参考链接:https://github.com/crazycodeboy/react-native-splash-screen

#安装依赖
npm i react-native-splash-screen --save

#链接依赖库、若链接失败请再次执行npm install命令后重新链接
react-native link react-native-splash-screen

2):レビューアンドロイド/アプリ/ srcに/メイン/ javaの/ COM /パッケージ名/MainActivity.java、次の行を追加します。

+ import android.os.Bundle; 

+ // react-native-splash-screen >= 0.3.1
+ import org.devio.rn.splashscreen.SplashScreen;

+ // react-native-splash-screen < 0.3.1
+ import com.cboy.rn.splashscreen.SplashScreen;
   
+ @Override
+ protected void onCreate(Bundle savedInstanceState) {
+     SplashScreen.show(this);  // here
+     super.onCreate(savedInstanceState);
+ }

3):コンテンツを追加し、アプリ/ srcに/メイン/ resを/レイアウト(このフォルダがなければ、独自に作成してください)にlaunch_screen.xmlを作成します。

<?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>

4)に、図のlaunch_screen.pngするように設定する開始コマンドと描画可能-XXXフォルダ:

#若无此类文件夹请自行创建
drawable-ldpi
drawable-mdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
drawable-xxxhdpi

5):アプリで色名primary_darkを作成/ srcに/メイン/ resを/値/ colors.xml

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

6):オープンアンドロイド/アプリ/ SRC /メイン/のRES /値/のstyles.xml透明な背景

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        
        <!--设置透明背景-->
        <item name="android:windowIsTranslucent">true</item>
    </style>
</resources>

7):入り口ファイルで呼び出されます


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

//生命周期函数、render渲染完成之后调用、可结合async await函数使用
componentDidMount() {

    //在显示图片时可以处理其他请求

    //隐藏图片显示
    SplashScreen.hide();
}

8):レンダリングとテストの写真

ここに画像を挿入説明
ここに画像を挿入説明

おすすめ

転載: blog.csdn.net/weixin_44187730/article/details/88027825