<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專(zhuān)題視頻專(zhuān)題問(wèn)答1問(wèn)答10問(wèn)答100問(wèn)答1000問(wèn)答2000關(guān)鍵字專(zhuān)題1關(guān)鍵字專(zhuān)題50關(guān)鍵字專(zhuān)題500關(guān)鍵字專(zhuān)題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關(guān)鍵字專(zhuān)題關(guān)鍵字專(zhuān)題tag2tag3文章專(zhuān)題文章專(zhuān)題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專(zhuān)題3
        問(wèn)答文章1 問(wèn)答文章501 問(wèn)答文章1001 問(wèn)答文章1501 問(wèn)答文章2001 問(wèn)答文章2501 問(wèn)答文章3001 問(wèn)答文章3501 問(wèn)答文章4001 問(wèn)答文章4501 問(wèn)答文章5001 問(wèn)答文章5501 問(wèn)答文章6001 問(wèn)答文章6501 問(wèn)答文章7001 問(wèn)答文章7501 問(wèn)答文章8001 問(wèn)答文章8501 問(wèn)答文章9001 問(wèn)答文章9501
        當(dāng)前位置: 首頁(yè) - 科技 - 知識(shí)百科 - 正文

        React Native如何消除啟動(dòng)時(shí)白屏的方法

        來(lái)源:懂視網(wǎng) 責(zé)編:小采 時(shí)間:2020-11-27 22:33:17
        文檔

        React Native如何消除啟動(dòng)時(shí)白屏的方法

        React Native如何消除啟動(dòng)時(shí)白屏的方法:在RN 項(xiàng)目啟動(dòng)之后有一個(gè)短暫的白屏,調(diào)試階段白屏的時(shí)間較長(zhǎng),大概3-5秒,打正式包后這個(gè)白屏?xí)r間會(huì)大大縮短,大多時(shí)候都是一閃而過(guò),所以稱(chēng)之為閃白。 其實(shí)解決的方案也有很多,這里做一個(gè)簡(jiǎn)單的總結(jié)。 白屏的原因 在iOS App 中有 啟動(dòng)圖(Lau
        推薦度:
        導(dǎo)讀React Native如何消除啟動(dòng)時(shí)白屏的方法:在RN 項(xiàng)目啟動(dòng)之后有一個(gè)短暫的白屏,調(diào)試階段白屏的時(shí)間較長(zhǎng),大概3-5秒,打正式包后這個(gè)白屏?xí)r間會(huì)大大縮短,大多時(shí)候都是一閃而過(guò),所以稱(chēng)之為閃白。 其實(shí)解決的方案也有很多,這里做一個(gè)簡(jiǎn)單的總結(jié)。 白屏的原因 在iOS App 中有 啟動(dòng)圖(Lau

        在RN 項(xiàng)目啟動(dòng)之后有一個(gè)短暫的白屏,調(diào)試階段白屏的時(shí)間較長(zhǎng),大概3-5秒,打正式包后這個(gè)白屏?xí)r間會(huì)大大縮短,大多時(shí)候都是一閃而過(guò),所以稱(chēng)之為“閃白”。

        這里寫(xiě)圖片描述

        這里寫(xiě)圖片描述

        其實(shí)解決的方案也有很多,這里做一個(gè)簡(jiǎn)單的總結(jié)。

        白屏的原因

        在iOS App 中有 啟動(dòng)圖(LaunchImage),啟動(dòng)圖結(jié)束后才會(huì)出現(xiàn)上述的閃白,這個(gè)過(guò)程是 js 解釋的過(guò)程,JS 解釋完畢之前沒(méi)有內(nèi)容,所以才表現(xiàn)出白屏,那么解決的方法就是在啟動(dòng)圖結(jié)束后,JS 解釋完成前做一些簡(jiǎn)單的處理。

        解決的常見(jiàn)方案:

      1. 啟動(dòng)圖結(jié)束后通過(guò)原生代碼加載一張全屏占位圖片,跟啟動(dòng)圖一樣的圖片,混淆視聽(tīng)“欺騙用戶(hù)”。
      2. JS解釋完畢后通知原生可以移除占位圖
      3. 收到 JS 發(fā)來(lái)的可以移除占位圖的通知,移除占位圖
      4. 代碼實(shí)現(xiàn)

        新建一個(gè)SplashScreen 文件用來(lái)接收 JS 發(fā)來(lái)的”移除占位圖”的消息。相關(guān)代碼如下:

        SplashScreen.h

        #import <Foundation/Foundation.h>
         #import "RCTBridgeModule.h"
         @interface SplashScreen : NSObject<RCTBridgeModule>
        
         @end
        

        SplashScreen.m

        #import "SplashScreen.h"
         @implementation SplashScreen
        
         RCT_EXPORT_MODULE();
        
         RCT_EXPORT_METHOD(close){
         [[NSNotificationCenter defaultCenter] postNotificationName:@"Notification_CLOSE_SPLASH_SCREEN" object:nil];
         }
         @end
        

        在AppDelegate.m 加入以下代碼:

        @interface AppDelegate ()
         {
         UIImageView *splashImage;
         }
         @end
        
         @implementation AppDelegate
        
         - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
         {
         [[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(closeSplashImage) name:"Notification_CLOSE_SPLASH_SCREEN" object:nil];
        
         ...
         [self autoSplashScreen];//寫(xiě)在 return YES 之前,其他代碼之后
         return YES;
         }
         -(void)autoSplashScreen {
         if (!splashImage) {
         splashImage = [[UIImageView alloc]initWithFrame:[UIScreen mainScreen].bounds];
         }
         if (IPHONESCREEN3p5) {
         [splashImage setImage:[UIImage imageNamed:@"launch4"]];
         }else if (IPHONESCREEN4){
         [splashImage setImage:[UIImage imageNamed:@"launch5"]];
         }else if (IPHONESCREEN4p7){
         [splashImage setImage:[UIImage imageNamed:@"launch6"]];
         }else if (IPHONESCREEN5p5){
         [splashImage setImage:[UIImage imageNamed:@"launch7"]];
         }
         [self.window addSubview:splashImage];
         }
         -(void)closeSplashImage {
         dispatch_sync(dispatch_get_main_queue(), ^{
         [UIView animateWithDuration:0.5 animations:^{
         splashImage.alpha = 0;
         } completion:^(BOOL finished){
         [splashImage removeFromSuperview];
         }];
         });
         }
        
        

        在合適的時(shí)機(jī)選擇移除占位圖。js端代碼:

        if (Platform.OS === 'ios') {
         NativeModules.SplashScreen.close();
         };
        

         更加詳細(xì)的信息可以訪問(wèn):https://github.com/crazycodeboy/react-native-splash-screen/blob/master/README.zh.md

        聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        React Native如何消除啟動(dòng)時(shí)白屏的方法

        React Native如何消除啟動(dòng)時(shí)白屏的方法:在RN 項(xiàng)目啟動(dòng)之后有一個(gè)短暫的白屏,調(diào)試階段白屏的時(shí)間較長(zhǎng),大概3-5秒,打正式包后這個(gè)白屏?xí)r間會(huì)大大縮短,大多時(shí)候都是一閃而過(guò),所以稱(chēng)之為閃白。 其實(shí)解決的方案也有很多,這里做一個(gè)簡(jiǎn)單的總結(jié)。 白屏的原因 在iOS App 中有 啟動(dòng)圖(Lau
        推薦度:
        標(biāo)簽: 白屏 方法 啟動(dòng)
        • 熱門(mén)焦點(diǎn)

        最新推薦

        猜你喜歡

        熱門(mén)推薦

        專(zhuān)題
        Top
        主站蜘蛛池模板: 亚洲国产精品自在拍在线播放| 亚洲国产精品无码AAA片| 亚洲春色在线视频| 亚洲国产精品无码第一区二区三区| 日本高清不卡中文字幕免费| 99免费观看视频| 免费在线观看黄色毛片| 亚洲精品福利视频| 成人一级免费视频| 99久久99这里只有免费费精品| 亚洲精品国产精品乱码不卞| 亚洲国产成人精品无码区在线秒播| 特级毛片免费观看视频| 亚洲精品视频在线观看免费| 亚洲日韩中文字幕日韩在线| 亚洲人成人77777网站不卡| 成在线人免费无码高潮喷水| 亚洲欧洲免费无码| 亚洲AV永久无码精品| 亚洲精品av无码喷奶水糖心| 男的把j放进女人下面视频免费| 国产高清免费的视频| 亚洲理论在线观看| 国产精品偷伦视频免费观看了| 成全影视免费观看大全二| 亚洲A∨无码无在线观看| 免费一级特黄特色大片| 无人在线观看免费高清视频 | 日本牲交大片免费观看| 亚洲激情视频在线观看| 五月天婷婷精品免费视频| 夫妻免费无码V看片| 久久精品国产亚洲av影院| 国产免费AV片在线观看播放| 蜜臀91精品国产免费观看| 亚洲精品福利网泷泽萝拉| 99麻豆久久久国产精品免费| 人人狠狠综合久久亚洲高清| 最新亚洲春色Av无码专区| 久视频精品免费观看99| 亚洲国产精品一区二区成人片国内 |