react-native(ios打包者蠕、上傳教程)

趁著現(xiàn)在有時間,總結(jié)一下掐松,留給需要的小伴們看踱侣。

1粪小、首先我們要先打離線資源包

為了日后把打包方便,我們把打包指令填在下package.json

"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "bundle-ios": "node node_modules/react-native/local-cli/cli.js bundle --entry-file index.js --platform ios --dev false --bundle-output ./ios/bundle/index.jsbundle --assets-dest ./ios/bundle"
  },

這樣打包只需要在根目錄下輸入npm run bundle-ios 即可(切記一定要先在項目-->ios下新建bundle文件夾抡句,不然會報錯)

WeChat7031a99aff4ba621818bfdc76851ac6d.png

之后你會發(fā)現(xiàn)bundle文件下面已經(jīng)有了內(nèi)容(如下圖)
image.png

2探膊、接下來將離線資源包放入到項目中

在Xcode中添加資源到項目中,必須使用Create folder references的方式(也就是文件夾的方式)添加bundle文件夾:


image.png

必須使用Create folder references的方式添加:


image.png

添加成功后bundle文件夾為藍色(如下圖)
WeChatabd027c906136c6b33dabd6affced2b2.png

3待榔、打包的最后一步

在開發(fā)的過程中可以在這里配置Debug Server的地址逞壁,當發(fā)布上線的時候,就需要使用離線的jsbundle文件锐锣,因此需要設(shè)置jsCodeLocation為本地的離線jsbundle腌闯。

在AppDelegate設(shè)置離線的jsCodeLocation:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

//  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
//  jsCodeLocation = [NSURL URLWithString:@"http://192.0.0.0:8081/index.bundle?platform=ios&dev=true"];//真機Hot reloading
#ifdef DEBUG
     jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];//開發(fā)調(diào)試
#else
    jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"bundle/index" withExtension:@"jsbundle"];//上線打包
  
#endif
 ........
}

上傳

按照下面的步驟走,就可以打包成功雕憔,我不說各種原因姿骏,只講操作步驟:

簡單粗暴!=锉恕分瘦!

首先你得有一個蘋果開發(fā)者賬號。要是沒有琉苇,就自己申請一個嘲玫。

注意:在創(chuàng)建app IDs 還有描述文件的時候,需要添加的是發(fā)布版本并扇,就是ad hoc里面的版本去团,而不是簡單的開發(fā)版本。如下圖:(證書與描述文件都需要發(fā)布版本的)

1025776-99c09a1ff3f97f85.png

可以先忽略穷蛹,一會在創(chuàng)建證書的時候再看

1.創(chuàng)建一個ipaDemo工程渗勘。

2.打開蘋果開發(fā)者中心。

網(wǎng)址https://developer.apple.com/membercenter

3.打開這個網(wǎng)址之后會出現(xiàn)下面的樣式俩莽。

1025776-daff565c3b97464f.png

剛剛進入的的界面的樣式

4.進入App開發(fā)賬戶里面:

1025776-7b12980931d20f40.png

手機App

5.創(chuàng)建證書的總體步驟旺坠,分5步:

5.1創(chuàng)建證書

5.2添加APP IDs

5.3添加設(shè)備

5.4創(chuàng)建描述文件

1025776-70e0e6683d43b4d5.png

總體步驟

對于這些過程,網(wǎng)絡(luò)上的文章比較多扮超,我也不一一展開了取刃,我添加一個比較好的博客的文章,與大家分享這個過程出刷。說白了這也是真機測試與創(chuàng)建證書的一部分璧疗。李大澤網(wǎng)址

6. iOS打包,一共有三種方式馁龟,不過還是通過Xcode的打包比較好崩侠,因為我在測試了這三種打包之后,我發(fā)現(xiàn)通過xcode打包的包的大小是最小的坷檩,不過下面我也介紹這三種打包方式却音。

第一種打包方式:

6.1 Xcode打包:

6.1.1

1025776-13e35bb0f33221a7.png
  1. 配置provisioning profile與證書

6.1.2

1025776-d7dcf518d308bfcf.png

2.配置provisioning profile與證書

我在上面這兩步的時候改抡,由于只調(diào)整了一個code singing,所以出現(xiàn)了一直打包不成功系瓢。一般情況下阿纤,是先進行步驟6.1.1,基本上不用管步驟6.1.2夷陋,只需要看看6.1.2是否與6.1.1的描述文件欠拾、證書是否一致。保證一致就可以了骗绕。

6.1.3

1025776-b92449e396deb8a9.png

6.1.4 選擇Release 模式:

1025776-eb99945484daf7d0.png

6.1.5 需要release 藐窄,Run里面的,也需要release Archive 里面的酬土。

1025776-457595d6f73f0e6d.png

6.1.6

1025776-e0c77adc7a5a19b1.png

打包示例

6.1.7開始打包:若是comd+b 運行成功了枷邪,就可以進行下一步了

1025776-4d5968b6c21fee0d.png

6.1.8生成包:

1025776-c0af2fcb7963157b.png

6.1.9輸出包:

1025776-dd0d2e3a58bb3b4e.png

6.1.10

1025776-3b3d73cc0c8a7b08.png

生成四種不同的開發(fā)包,查看鏈接诺凡。4種ipa包

6.1.11

1025776-8693a93a216506ca.png

6.1.12

1025776-ec024a2db9fd5acc.png

6.1.13 在桌面上出現(xiàn)安裝包:

WeChat7095cb98689fbece695bb2d460f75c79.png

WeChat2bfb468022b809a87fc742b3e8c132b9.png

大功告成

第二種打包方式:

6.2 通過生成文件Payload文件夾,生成ipa包践惑。

重復上面6.1.7 之前的所有步驟腹泌,在commd+b 編譯之后,查看是否編譯成功尔觉,要是成功凉袱。如下圖:

6.2.1

1025776-c5304f2b766524ea.png

表示可以打包了

6.2.2

1025776-3f12f11ca15ec527.png

6.2.3

1025776-fad6fc7cbb7f9949.png

6.2.4在桌面上新建一個文件夾名字叫“Payload”,注意一個字母也不能少侦铜。并將上面的APP直接拷貝到這個文件夾下面专甩,壓縮這個文件夾,并將文件夾的后綴名钉稍,改正 “.ipa”涤躲。如下圖:

1025776-51d7e48121f19a17.png

ipa

第三種打包方式:

通過iTunes,打包贡未。

6.3.1 打開你的iTunes种樱。

6.3.2 直接把剛剛的那個 .app,拖到你的iTunes里面俊卤。如下圖:

1025776-98c5cc64ebd6feaa.png

6.3.3 在Finder里面顯示:

1025776-2fbdbc268f32b97b.png

6.3.4這樣就生成了一個ipa包:

1025776-7d1549a9d9fa2dd4.png
  1. 安裝到測試機上:對于以上生成的所有的ipa包嫩挤,都需要雙擊打開他們,在你的iTunes里面消恍,安裝你的這個應(yīng)用包岂昭。如下圖:
1025776-08aeae6928df67cd.png

安裝步驟

生成的app如下圖,要是能夠顯示app是正常的狠怨,則證明沒有問題约啊,否則安裝不成功:

1025776-41174befbe820362.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末邑遏,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子棍苹,更是在濱河造成了極大的恐慌无宿,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,122評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件枢里,死亡現(xiàn)場離奇詭異孽鸡,居然都是意外死亡,警方通過查閱死者的電腦和手機栏豺,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,070評論 3 395
  • 文/潘曉璐 我一進店門彬碱,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人奥洼,你說我怎么就攤上這事巷疼。” “怎么了灵奖?”我有些...
    開封第一講書人閱讀 164,491評論 0 354
  • 文/不壞的土叔 我叫張陵嚼沿,是天一觀的道長。 經(jīng)常有香客問我瓷患,道長骡尽,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,636評論 1 293
  • 正文 為了忘掉前任擅编,我火速辦了婚禮攀细,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘爱态。我一直安慰自己谭贪,他們只是感情好,可當我...
    茶點故事閱讀 67,676評論 6 392
  • 文/花漫 我一把揭開白布锦担。 她就那樣靜靜地躺著俭识,像睡著了一般。 火紅的嫁衣襯著肌膚如雪洞渔。 梳的紋絲不亂的頭發(fā)上鱼的,一...
    開封第一講書人閱讀 51,541評論 1 305
  • 那天,我揣著相機與錄音痘煤,去河邊找鬼凑阶。 笑死,一個胖子當著我的面吹牛衷快,可吹牛的內(nèi)容都是我干的宙橱。 我是一名探鬼主播纤怒,決...
    沈念sama閱讀 40,292評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼趁啸,長吁一口氣:“原來是場噩夢啊……” “哼蒜胖!你這毒婦竟也來了漫蛔?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,211評論 0 276
  • 序言:老撾萬榮一對情侶失蹤宝冕,失蹤者是張志新(化名)和其女友劉穎张遭,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體地梨,經(jīng)...
    沈念sama閱讀 45,655評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡菊卷,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,846評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了宝剖。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片洁闰。...
    茶點故事閱讀 39,965評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖万细,靈堂內(nèi)的尸體忽然破棺而出扑眉,到底是詐尸還是另有隱情,我是刑警寧澤赖钞,帶...
    沈念sama閱讀 35,684評論 5 347
  • 正文 年R本政府宣布腰素,位于F島的核電站,受9級特大地震影響雪营,放射性物質(zhì)發(fā)生泄漏弓千。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,295評論 3 329
  • 文/蒙蒙 一卓缰、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧砰诵,春花似錦征唬、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,894評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至理肺,卻和暖如春摄闸,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背妹萨。 一陣腳步聲響...
    開封第一講書人閱讀 33,012評論 1 269
  • 我被黑心中介騙來泰國打工年枕, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人乎完。 一個月前我還...
    沈念sama閱讀 48,126評論 3 370
  • 正文 我出身青樓熏兄,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子摩桶,可洞房花燭夜當晚...
    茶點故事閱讀 44,914評論 2 355