React Native 插曲 iOS真機(jī)調(diào)試(失敗解決)

這幾天,打算把之前集合到原生項(xiàng)目中的React Native項(xiàng)目在真機(jī)上跑跑,順便試下發(fā)布更新等,理清以后的發(fā)布流程。。。結(jié)果,就一直卡在真機(jī)調(diào)試上了,明明在網(wǎng)絡(luò)上一堆,都是超簡(jiǎn)單的替換localhost就行。。結(jié)果結(jié)果,試了好久,終于解決了。

正常方案(React Native 0.29.0之前版本)

首先,你要讓調(diào)試用電腦和你的手機(jī)必須處于相同的 WiFi 網(wǎng)絡(luò)中下

  1. 打開 iOS 項(xiàng)目的 AppDelegate.m 文件

  2. 更改 jsCodeLocation 中的 localhost 改成你電腦的局域網(wǎng)IP地址(查看IP地址:點(diǎn)擊設(shè)置->網(wǎng)絡(luò)->就可以看到本機(jī)IP)

NSURL *jsCodeLocation;
jsCodeLocation = [NSURL URLWithString: @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
//
//  將localhost換成局域網(wǎng)中主機(jī)Mac的IP地址
jsCodeLocation = [NSURL URLWithString: @"http://10.10.10.60:8081/index.ios.bundle?platform=ios&dev=true"];
  1. 在 Xcode 中,選擇你的手機(jī)作為目標(biāo)設(shè)備,Run 即可

可以通過(guò)晃動(dòng)設(shè)備來(lái)打開開發(fā)菜單(重載、調(diào)試等)

然后發(fā)覺,我試了n久,一直失敗,提示無(wú)連接到服務(wù)器。
感覺這個(gè)方法在iOS9之前應(yīng)該都是可以成功的。
原因如下:
Google后查證,iOS9引入了新特性App Transport Security (ATS)。詳情:App Transport Security (ATS)
新特性要求App內(nèi)訪問(wèn)的網(wǎng)絡(luò)必須使用HTTPS協(xié)議。
(下文提供解決方案)

React Native 0.29.0之后版本方案

React Native iOS在0.29.0版本中BundleURL加載方法做了重大改變,新增了RCTBundleURLProvider單例類專門處理BundleURL,使用NSUserDefaults保存配置信息。

默認(rèn)加載方式

Debug模式下,執(zhí)行react-native-xcode.sh編譯腳本會(huì)自動(dòng)獲取當(dāng)前網(wǎng)卡en0的IP地址,并打入App包中一個(gè)配置文件ip.txt,App運(yùn)行時(shí)會(huì)讀取ip文件,自動(dòng)生成Developer Server URL,通過(guò)這種加載方式,我們不再需要手動(dòng)去把”localhost”改成Mac的IP了,每次編譯都會(huì)讀取當(dāng)前最新的IP。

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

手動(dòng)設(shè)置IP

RCTBundleURLProvider在接口中暴露了jsLocation屬性,可以通過(guò)setJsLocation手動(dòng)設(shè)置IP。(如果只是本地調(diào)試的話,其實(shí)沒(méi)有必要手動(dòng)設(shè)置哈,因?yàn)槟J(rèn)加載方式就回讀取當(dāng)前最新的IP)

//  調(diào)用前先設(shè)置IP
[[RCTBundleURLProvider sharedSettings] setJsLocation:@”10.10.10.60”];

App Transport Security 設(shè)置

上面兩種不同的方案主要是針對(duì)React Native不同版本做的區(qū)分,,推薦使用第二種方案,比較簡(jiǎn)單直接。
不過(guò)如果是iOS9的話,估計(jì)上面的方案均沒(méi)有讓你真的調(diào)試成功,原因在于:
iOS9引入了新特性App Transport Security (ATS)。詳情:App Transport Security (ATS)
新特性要求App內(nèi)訪問(wèn)的網(wǎng)絡(luò)必須使用HTTPS協(xié)議。(如果直接用IP地址發(fā)出http請(qǐng)求失敗的話大多數(shù)原因也是這個(gè),同下解決辦法)

解決辦法:
需要在Info設(shè)置NSAppTransportSecurity的NSAllowsArbitraryLoads為true

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
    </dict>

效果如下:


NSAppTransportSecurity設(shè)置.png

花費(fèi)了幾天的時(shí)間弄真機(jī)測(cè)試和打包更新,因?yàn)榫W(wǎng)上查到的資料大多是以前的,而NSAppTransportSecurity又是iOS9的新特性,這個(gè)真的很重要哈,所以就作為一個(gè)插曲插進(jìn)原本有規(guī)劃的寫作,分享下,希望讀者不用走這歪路。。。如果還是調(diào)試失敗的話歡迎留言討論下哈哈。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,836評(píng)論 6 540
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,275評(píng)論 3 428
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,904評(píng)論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,633評(píng)論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 72,368評(píng)論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,736評(píng)論 1 328
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,740評(píng)論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,919評(píng)論 0 289
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,481評(píng)論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 41,235評(píng)論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,427評(píng)論 1 374
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,968評(píng)論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,656評(píng)論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,055評(píng)論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,348評(píng)論 1 294
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 52,160評(píng)論 3 398
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,380評(píng)論 2 379

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