RN模組----react-native-splash-screen

ding_發表於2018-08-02
React
在做RN開發的時候，當載入啟動屏的時候經常會出現1、2秒的白屏，而react-native-splash-screen就是用來解決白屏問題的

1、安裝模組

cd到專案根目錄下執行yarn add react-native-splash-screen，然後再執行react-native link react-native-splash-screen

2、在iOS上配置

在AppDelegate.m檔案下加入以下程式碼
#import "AppDelegate.h"
#import "RNSplashScreen.h" //add① 引入標頭檔案
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{
[SplashScreen show];
return YES;
}

注意：在執行的時候可能會出現Unknown receiver 'SplashScreen'這樣的錯誤，這時候只需要找到SplashScreen.m檔案，把錯誤的地方改成RNSplashScreen即可

3、將圖片放到LaunchImage資料夾下

4、在ReactNative上配置

在需要關閉啟動頁的js檔案下引入 import SplashScreen from 'react-native-splash-screen'，然後再關閉處新增程式碼SplashScreen.hide() 例如
componentDidMount(){
SplashScreen.hide()
};

這樣就基本上配置好了

注意事項:

1.當提示RNSplashScreen.h file not found時候，

  • 1 首先開啟XCode右鍵點選Libraries資料夾,選擇Add files to 工程名,找到node_modules下得react-native- splash-screen 然後新增SplashScreen.xcodeproj到工程
  • 2 然後找到Build Phases下的Link Binary With Libraries 新增libSplashScreen.a檔案
  • 3 最後找到 Build Settings → Search Paths 新增以下程式碼 $(SRCROOT)/../node_modules/react-native-splash-screen/ios即可

相關文章