增加APP启动页组件，以及配置文件的修改

README.md

@@ -15,3 +15,4 @@
 - 基于 `react-native-date-picker` 实现 `Android`/`Ios` 相同效果的日期选择器    
 - 基本 `react-native-root-toast` 实现弹窗提示    
 - 基于 `react-native-scrollable-tab-view` 实现主页面 `Tab` 选项卡切换
+- 基于 `react-native-splash-screen` 实现 `APP` 启动页布局

android/app/build.gradle

@@ -138,6 +138,7 @@ android {
 }
 
 dependencies {
+    implementation project(':react-native-splash-screen')
     implementation project(':react-native-date-picker')
     implementation project(':react-native-sound')
     implementation project(':react-native-audio')

android/app/src/main/AndroidManifest.xml

 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
+  xmlns:tools="http://schemas.android.com/tools"
   package="com.bonehouse_business_app">
 
     <uses-permission android:name="android.permission.INTERNET" />
@@ -20,6 +21,7 @@
       android:icon="@mipmap/ic_launcher"
       android:roundIcon="@mipmap/ic_launcher_round"
       android:allowBackup="false"
+      tools:replace="android:allowBackup"
       android:theme="@style/AppTheme">
       <activity
         android:name=".MainActivity"

android/app/src/main/java/com/bonehouse_business_app/MainActivity.java

 package com.bonehouse_business_app;
-
+import android.os.Bundle;
 import com.facebook.react.ReactActivity;
+import org.devio.rn.splashscreen.SplashScreen;
 
 public class MainActivity extends ReactActivity {
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        // SplashScreen.show(this);  // here 
+        SplashScreen.show(this, R.style.SplashScreenTheme);  // 使用自定义主题颜色
+        super.onCreate(savedInstanceState);
+    }
 
     /**
      * Returns the name of the main component registered from JavaScript.

android/app/src/main/java/com/bonehouse_business_app/MainApplication.java

@@ -3,6 +3,7 @@ package com.bonehouse_business_app;
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import org.devio.rn.splashscreen.SplashScreenReactPackage;
 import com.henninghall.date_picker.DatePickerPackage;
 import com.zmxv.RNSound.RNSoundPackage;
 import com.rnim.rn.audio.ReactNativeAudioPackage;
@@ -28,6 +29,7 @@ public class MainApplication extends Application implements ReactApplication {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+            new SplashScreenReactPackage(),
             new DatePickerPackage(),
             new RNSoundPackage(),
             new ReactNativeAudioPackage(),

android/app/src/main/res/layout/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>
+
+<!-- <?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+android:orientation="vertical" android:layout_width="match_parent"
+android:layout_height="match_parent"
+android:background="@drawable/launch_screen">
+</LinearLayout> -->
\ No newline at end of file

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

+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- 自定义颜色 -->
+    <color name="status_bar_color">#007EFF</color>
+    <color name="primary_dark">#000000</color>
+</resources>
\ No newline at end of file

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

@@ -3,6 +3,11 @@
     <!-- Base application theme. -->
     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
         <!-- Customize your theme here. -->
+        <!--设置透明背景-->
+        <item name="android:windowIsTranslucent">true</item>
+    </style>
+    <!-- 自定义顶部bar主题 -->
+    <style name="SplashScreenTheme" parent="SplashScreen_SplashTheme">
+        <item name="colorPrimaryDark">@color/status_bar_color</item>
     </style>
-
 </resources>

android/settings.gradle

 rootProject.name = 'BoneHouse_Business_APP'
+include ':react-native-splash-screen'
+project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
 include ':react-native-date-picker'
 project(':react-native-date-picker').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-date-picker/android')
 include ':react-native-sound'

ios/BoneHouse_Business_APP/AppDelegate.m

@@ -10,6 +10,7 @@
 #import <React/RCTBridge.h>
 #import <React/RCTBundleURLProvider.h>
 #import <React/RCTRootView.h>
+#import "RNSplashScreen.h"  // 导入启动页组件库
 
 @implementation AppDelegate
 
@@ -27,6 +28,7 @@
   rootViewController.view = rootView;
   self.window.rootViewController = rootViewController;
   [self.window makeKeyAndVisible];
+  [RNSplashScreen show];  // 添加启动页展示
   return YES;
 }
 

package.json

@@ -16,6 +16,7 @@
     "react-native-root-toast": "3.1.1",
     "react-native-scrollable-tab-view": "^0.9.0",
     "react-native-sound": "0.11.0",
+    "react-native-splash-screen": "^3.2.0",
     "react-navigation": "3.11.0",
     "react-redux": "7.1.0",
     "redux": "4.0.1",