注意：未經允許不可私自轉載，違者必究

React Native官方文件：https://reactnative.cn/docs/getting-started/

react-native-splash-screen官方文件：https://github.com/crazycodeboy/react-native-splash-screen

專案地址GitHub地址：https://github.com/zhouwei1994/nativeCase.git

安裝react-native-splash-screen

在專案目錄下cmd裡面執行以下命令：

yarn add react-native-splash-screen

//關聯原生配置
react-native link react-native-splash-screen
 

沒有安裝yarn映象的請看教程：https://blog.csdn.net/weixin_40614372/article/details/86154119

Android原生配置

• 在專案目錄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')
 

注意：新增前請看一下當前檔案裡面有沒有對應的配置，react-native link react-native-splash-screen命令貌似可以自動新增上面這一段話

• 在專案目錄android/app/build.gradle檔案中，將:react-native-splash-screen專案新增為編譯時依賴項：

dependencies { ... 
    compile project（'：react-native-splash-screen '）
}

• 在專案目錄android/app/src/main/java/com/nativeCase(nativeCase 是我建專案的時候的檔名)
  /MainApplication.java檔案：

前面帶+的加入到檔案裡面，其他的正常情況是都有的。

+ import org.devio.rn.splashscreen.SplashScreenReactPackage; 

public class MainApplication extends Application implements 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;
    }
}

• 在專案目錄android/app/src/main/java/com/nativeCase(nativeCase 是我建專案的時候的檔名)/MainActivity.java檔案：

前面帶+的加入到檔案裡面，其他的正常情況是都有的。

+ import android.os.Bundle; // here

import com.facebook.react.ReactActivity;

+ import org.devio.rn.splashscreen.SplashScreen; // here

public class MainActivity extends ReactActivity {
+  @Override
+   protected void onCreate(Bundle savedInstanceState) {
+       SplashScreen.show(this);  // here
+       super.onCreate(savedInstanceState);
+   }
}

• 在專案目錄android/app/src/main/res下建立：

  建立layout資料夾（已有請忽略）

         在layout資料夾下建立launch_screen.xml檔案（已有請忽略）

  launch_screen.xml檔案程式碼為：

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

上面程式碼裡面android:background="@drawable/launch_screen"    launch_screen是啟動頁圖片名稱，可自行替換對應的圖片名稱

• 在專案目錄android/app/src/main/res下建立：

建立 drawable-ldpi資料夾，放入對應的啟動頁圖片

建立 drawable-mdpi資料夾，放入對應的啟動頁圖片

建立 drawable-hdpi資料夾，放入對應的啟動頁圖片

建立 drawable-xhdpi資料夾，放入對應的啟動頁圖片

建立 drawable-xxhdpi資料夾，放入對應的啟動頁圖片

建立 drawable-xxxhdpi資料夾，放入對應的啟動頁圖片

• 在專案目錄android/app/src/main/res/values/colors.xml下（沒有colors.xml檔案請自行建立）：

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

react-native 用法

在src/App.js裡面：

import React, { Component } from 'react';
import { ToastAndroid, BackHandler, StatusBar } from 'react-native';
import { NavigationActions } from "react-navigation";
import { Provider } from 'react-redux';
//引入react-native-splash-screen
import SplashScreen from 'react-native-splash-screen';
import { store, AppWithNavigationState } from './store/index';
export default class Root extends React.Component {
  componentDidMount() {
    // 在入口檔案處隱藏掉啟動頁
    SplashScreen.hide(); // 關閉啟動螢幕
  }
  render() {
    return (
      <Provider store={store}>
        <AppWithNavigationState />
      </Provider>
    );
  }
}

IOS的配置，後續更新，本人目前還沒嘗試不敢亂寫，各位小夥伴可以去看官方教程，官方教程寫的還是很清楚的。

專案地址GitHub地址：https://github.com/zhouwei1994/nativeCase.git

注意：未經允許不可私自轉載，違者必究