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):レンダリングとテストの写真