React Native OC源碼閱讀—RCTBundleProvider

從最外層源代碼來(lái)看陶耍,React Native初始化過(guò)程分為兩步:獲取JS代碼包的URL和創(chuàng)建RCTRootView實(shí)例,如下所示她混。

#import "AppDelegate.h"

#import "RCTBundleURLProvider.h"
#import "RCTRootView.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"AwesomeProject"
                                               initialProperties:nil
                                                   launchOptions:launchOptions];
}

@end

其中烈钞,JS代碼包URL的獲取是通過(guò)RCTBundleProvider這個(gè)類(lèi)實(shí)現(xiàn)的泊碑。JS代碼包的URL有兩種可能結(jié)果,一種是Packager Server URL毯欣,一種是本地JS代碼包的文件路徑馒过。通過(guò)jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];去獲取JS代碼包URL時(shí),會(huì)首先檢查是否有正在運(yùn)行的Packager Server酗钞,如果有則返回相應(yīng)Packager Server中JS代碼包的絕對(duì)路徑腹忽;如果沒(méi)有正在運(yùn)行的Packager Server,則會(huì)返回一個(gè)本地JS代碼包的文件路徑砚作,不傳遞fallbackResource參數(shù)時(shí)窘奏,默認(rèn)返回 本地main.jsbundle的文件路徑。

接下來(lái)葫录,我們具體分析一下RCTBundleProvider的工作原理着裹。首先看看RCTBundleProvider提供的幾個(gè)重要方法。

serverRootWithHost

static NSURL *serverRootWithHost(NSString *host)
{
  return [NSURL URLWithString:
          [NSString stringWithFormat:@"http://%@:%lu/",
           host, (unsigned long)kRCTBundleURLProviderDefaultPort]];
}

該方法會(huì)根據(jù)傳進(jìn)去的host返回相應(yīng)的Packager Server URL米同。例如骇扇,當(dāng)傳入的host為localhost時(shí),返回的URL為http://localhost:8081/面粮,其中8081是默認(rèn)端口號(hào)少孝,存儲(chǔ)在常量kRCTBundleURLProviderDefaultPort中。

isPackagerRunning

- (BOOL)isPackagerRunning:(NSString *)host
{
  NSURL *url = [serverRootWithHost(host) URLByAppendingPathComponent:@"status"];
  NSURLRequest *request = [NSURLRequest requestWithURL:url];
  NSURLResponse *response;
  NSData *data = [NSURLConnection sendSynchronousRequest:request returningResponse:&response error:NULL];
  NSString *status = [[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];
  return [status isEqualToString:@"packager-status:running"];
}

該方法會(huì)判斷指定host上的Packager Server是否在運(yùn)行但金。首先韭山,通過(guò)serverRootWithHost方法獲取該host的Packager Server URL,然后在Packager Server URL的末尾加上路徑status構(gòu)成新的URL冷溃,訪(fǎng)問(wèn)該URL钱磅,如果返回結(jié)果等于packager-status:running,則證明指定host上的Packager Server正在運(yùn)行似枕。例如盖淡,當(dāng)傳入的host為localhost時(shí),訪(fǎng)問(wèn)http://localhost:8081/status凿歼,如果請(qǐng)求返回結(jié)果為packager-status:running褪迟,則證明localhost上的Packager Server在運(yùn)行狀態(tài)。

guessPackagerHost

- (NSString *)guessPackagerHost
{
  static NSString *ipGuess;
  static dispatch_once_t onceToken;
  dispatch_once(&onceToken, ^{
    NSString *ipPath = [[NSBundle mainBundle] pathForResource:@"ip" ofType:@"txt"];
    ipGuess = [[NSString stringWithContentsOfFile:ipPath encoding:NSUTF8StringEncoding error:nil]
               stringByTrimmingCharactersInSet:[NSCharacterSet newlineCharacterSet]];
  });

  NSString *host = ipGuess ?: @"localhost";
  if ([self isPackagerRunning:host]) {
    return host;
  }
  return nil;
}

這個(gè)方法比較有意思答憔,顧名思義味赃,就是猜測(cè)Packager Server的host。第一次訪(fǎng)問(wèn)該方法的時(shí)候虐拓,它會(huì)首先嘗試讀取本地的ip.txt文件心俗,并把文件內(nèi)容存進(jìn)靜態(tài)變量ipGuess中。如果最后得到的ipGuess的值不為空,則使用ipGuess作為host城榛,否則默認(rèn)使用localhost作為host揪利。最后,還需要通過(guò)isPackagerRunning方法判斷得到的host上是否有Packager Server在運(yùn)行狠持,如果有才返回該host作為Packager Host疟位,否則返回nil
ip.txt文件是在項(xiàng)目編譯運(yùn)行的時(shí)候通過(guò)react-native-xcode.sh腳本生成的喘垂。在Debug模式下甜刻,react-native-xcode.sh腳本會(huì)自動(dòng)獲取電腦網(wǎng)卡en0的ip地址并存進(jìn)ip.txt,如下所示王污。

if [[ "$CONFIGURATION" = "Debug" && "$PLATFORM_NAME" != "iphonesimulator" ]]; then
  PLISTBUDDY='/usr/libexec/PlistBuddy'
  PLIST=$TARGET_BUILD_DIR/$INFOPLIST_PATH
  IP=$(ipconfig getifaddr en0)
  $PLISTBUDDY -c "Add NSAppTransportSecurity:NSExceptionDomains:localhost:NSTemporaryExceptionAllowsInsecureHTTPLoads bool true" "$PLIST"
  $PLISTBUDDY -c "Add NSAppTransportSecurity:NSExceptionDomains:$IP.xip.io:NSTemporaryExceptionAllowsInsecureHTTPLoads bool true" "$PLIST"
  echo "$IP.xip.io" > "$DEST/ip.txt"
fi

這樣罢吃,在使用iphone真機(jī)調(diào)試時(shí),只要保證iphone和電腦在同一局域網(wǎng)內(nèi)昭齐,iphone上的React Native程序即可從電腦上運(yùn)行的Packager Server加載JS代碼包尿招,無(wú)需再手動(dòng)設(shè)置jsCodeLocation

packagerServerHost

- (NSString *)packagerServerHost
{
  NSString *location = [self jsLocation];
  if (location != nil) {
    return location;
  }
#if RCT_DEV
  NSString *host = [self guessPackagerHost];
  if (host) {
    return host;
  }
#endif
  return nil;
}

該方法用于獲取Packager Server Host阱驾。那既然有了guessPackagerHost就谜,還要這個(gè)方法干什么呢?原來(lái)里覆,為了給使用者定制Packager Server Host的機(jī)會(huì)丧荐,RCTBundleProvider類(lèi)提供了jsLocation屬性,通過(guò)設(shè)置jsLocation屬性可以直接指定Packager Server Host喧枷。因此虹统,packagerServerHost方法首先檢查jsLocation屬性值,如果jsLocation屬性值不為空隧甚,則返回 jsLocation值作為Packager Server Host车荔,否則如果是Debug模式,則繼續(xù)通過(guò)guessPackagerHost方法獲取Packager Server Host戚扳。以上方法都獲取不到Packager Server Host時(shí)忧便,則返回nil

packagerServerURL

- (NSURL *)packagerServerURL
{
  NSString *const host = [self packagerServerHost];
  return host ? serverRootWithHost(host) : nil;
}

該方法很簡(jiǎn)單帽借,首先通過(guò)packagerServerHost方法獲取Packager Server Host珠增,然后通過(guò)serverRootWithHost方法獲取Packager Server URL。

實(shí)例方法 jsBundleURLForBundleRoot

- (NSURL *)jsBundleURLForBundleRoot:(NSString *)bundleRoot fallbackResource:(NSString *)resourceName
{
  resourceName = resourceName ?: @"main";
  NSString *packagerServerHost = [self packagerServerHost];
  if (!packagerServerHost) {
    return [[NSBundle mainBundle] URLForResource:resourceName withExtension:@"jsbundle"];
  } else {

    return [[self class] jsBundleURLForBundleRoot:bundleRoot
                                     packagerHost:packagerServerHost
                                        enableDev:[self enableDev]
                               enableMinification:[self enableMinification]];
  }
}

該方法會(huì)返回最終的JS代碼包URL砍艾。它接收兩個(gè)參數(shù)蒂教,一個(gè)bundleRoot,指的是Packager Server中js代碼包的入口文件名脆荷。另一個(gè)是fallbackResource悴品,指的是本地JS代碼包的資源文件名,當(dāng)找不到Packager Server Host時(shí),會(huì)根據(jù)該資源文件名返回本地JS代碼包的文件路徑苔严。

類(lèi)方法 jsBundleURLForBundleRoot

+ (NSURL *)jsBundleURLForBundleRoot:(NSString *)bundleRoot
                       packagerHost:(NSString *)packagerHost
                          enableDev:(BOOL)enableDev
                 enableMinification:(BOOL)enableMinification
{
  NSURLComponents *components = [NSURLComponents componentsWithURL:serverRootWithHost(packagerHost) resolvingAgainstBaseURL:NO];
  components.path = [NSString stringWithFormat:@"/%@.bundle", bundleRoot];
  // When we support only iOS 8 and above, use queryItems for a better API.
  components.query = [NSString stringWithFormat:@"platform=ios&dev=%@&minify=%@",
                      enableDev ? @"true" : @"false",
                      enableMinification ? @"true": @"false"];
  return components.URL;
}

該類(lèi)方法與實(shí)例方法jsBundleURLForBundleRoot同名,但是該方法只用于生成Packager Server的JS代碼包URL孤澎。

介紹完RCTBundleProvider的重要方法届氢,最后簡(jiǎn)單梳理一下RCTBundleProvider的調(diào)用流程。
實(shí)例方法jsBundleURLForBundleRoot作為入口方法被調(diào)用覆旭,在該方法里面退子,先嘗試獲取Packager Server Host。如果獲取到可用的Packager Server Host型将,則返回Packager Server中JS代碼包的URL作為jsCodeLocation寂祥。如果沒(méi)有獲取到可用的Packager Server Host,則返回一個(gè)本地JS代碼包的文件路徑作為jsCodeLocation七兜。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末丸凭,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子腕铸,更是在濱河造成了極大的恐慌惜犀,老刑警劉巖,帶你破解...
    沈念sama閱讀 207,113評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件狠裹,死亡現(xiàn)場(chǎng)離奇詭異虽界,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)涛菠,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評(píng)論 2 381
  • 文/潘曉璐 我一進(jìn)店門(mén)莉御,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人俗冻,你說(shuō)我怎么就攤上這事礁叔。” “怎么了言疗?”我有些...
    開(kāi)封第一講書(shū)人閱讀 153,340評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵晴圾,是天一觀(guān)的道長(zhǎng)。 經(jīng)常有香客問(wèn)我噪奄,道長(zhǎng)死姚,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,449評(píng)論 1 279
  • 正文 為了忘掉前任勤篮,我火速辦了婚禮都毒,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘碰缔。我一直安慰自己账劲,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,445評(píng)論 5 374
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著瀑焦,像睡著了一般腌且。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上榛瓮,一...
    開(kāi)封第一講書(shū)人閱讀 49,166評(píng)論 1 284
  • 那天铺董,我揣著相機(jī)與錄音,去河邊找鬼禀晓。 笑死精续,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的粹懒。 我是一名探鬼主播重付,決...
    沈念sama閱讀 38,442評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼凫乖!你這毒婦竟也來(lái)了确垫?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,105評(píng)論 0 261
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤拣凹,失蹤者是張志新(化名)和其女友劉穎森爽,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體嚣镜,經(jīng)...
    沈念sama閱讀 43,601評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡爬迟,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,066評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了菊匿。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片付呕。...
    茶點(diǎn)故事閱讀 38,161評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖跌捆,靈堂內(nèi)的尸體忽然破棺而出徽职,到底是詐尸還是另有隱情,我是刑警寧澤佩厚,帶...
    沈念sama閱讀 33,792評(píng)論 4 323
  • 正文 年R本政府宣布姆钉,位于F島的核電站,受9級(jí)特大地震影響抄瓦,放射性物質(zhì)發(fā)生泄漏潮瓶。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,351評(píng)論 3 307
  • 文/蒙蒙 一钙姊、第九天 我趴在偏房一處隱蔽的房頂上張望毯辅。 院中可真熱鬧,春花似錦煞额、人聲如沸思恐。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,352評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)胀莹。三九已至基跑,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間嗜逻,已是汗流浹背涩僻。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,584評(píng)論 1 261
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留栈顷,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,618評(píng)論 2 355
  • 正文 我出身青樓嵌巷,卻偏偏與公主長(zhǎng)得像萄凤,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子搪哪,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,916評(píng)論 2 344

推薦閱讀更多精彩內(nèi)容