在做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
即可