1. 程式人生 > >React Native釋出APP之打包iOS應用

React Native釋出APP之打包iOS應用

瞭解更多,可學習《React Native視訊教程》
,或關注我的GitHub和加入:
React Native學習交流群

React Native學習交流群


用React Native開發好APP之後,如何將APP釋出以供使用者使用呢?一款APP的釋出流程無外乎:簽名打包—>釋出到各store這兩大步驟。本文將向大家分享如何簽名打包一款React Native APP。

在本文中我將為大家講解如何打包和釋出React Native iOS App。

第一步:匯出js bundle包和圖片資源

和打包React Native Android應用不同的是,我們無法通過命令一步進行匯出React Native iOS應用。我們需要將JS部分的程式碼和圖片資源等打包匯出,然後通過XCode將其新增到iOS專案中。

匯出js bundle的命令

在React Native專案的根目錄下執行:

react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output release_ios/main.jsbundle --assets-dest release_ios/

通過上述命令,我們可以將JS部分的程式碼和圖片資源等打包匯出到release_ios目錄下:

生成jsbundle

其中,assets為專案中的JS部分所用到的圖片資源(不包括原生模組中的圖片資源),main.jsbundle是JS部分的程式碼。

在執行打包命令之前,我們需要先確保在我們專案的根目錄有release_ios資料夾,沒有的話建立一個。

第二步:將js bundle包和圖片資源匯入到iOS專案中

這一步我們需要用到XCode,選擇assets資料夾與main.jsbundle檔案將其拖拽到XCode的專案導航面板中即可。

匯入jsbundle

然後,修改AppDelegate.m檔案,新增如下程式碼:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    
  NSURL *jsCodeLocation;
 //jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
 +jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
...
  return YES;
}

上述程式碼的作用是讓React Native去使用我們剛才匯入的jsbundle,這樣以來我們就擺脫了對本地nodejs伺服器的依賴。

提示:如果在專案中使用了CodePush熱更新,那麼我們需要就可以直接通過CodePush來讀取本地的jsbundle,方法如下:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;  
#ifdef DEBUG
    jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
#else
    jsCodeLocation = [CodePush bundleURL];
#endif
...
  return YES;
}

到目前為止呢,我們已經將js bundle包和圖片資源匯入到iOS專案中,接下來我們就可以釋出我們的iOS應用了。

第三步:釋出iOS應用

釋出iOS應用我們需要有一個99美元的賬號用於將App上傳到AppStore,或者是299美元的企業級賬號用於將App釋出到自己公司的伺服器或第三方公司的伺服器。

接下來我們就需要進行申請APPID ➜ 在Tunes Connect建立應用 ➜ 打包程式 ➜ 將應用提交到app store等幾大步驟。

因為官方文件中有詳細的說明,在這我就不再重複了。

如果,大家在打包釋出React Native iOS應用的過程中遇到問題可以在本文的下方進行留言,我看到了後會及時回覆的哦。
另外也可以關注我的新浪微博,或者關注我的Github來獲取更多有關React Native開發的技術乾貨

推薦學習:視訊教程《React Native開發跨平臺GitHub App》