React Native 发布 APP 之打包 iOS 应用

Question

用 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 目录下：

其中，assets 为项目中的 JS 部分所用到的图片资源（不包括原生模块中的图片资源），main.jsbundle 是 JS 部分的代码。

在执行打包命令之前，我们需要先确保在我们项目的根目录有release_ios文件夹，没有的话创建一个。

第二步：将 js bundle 包和图片资源导入到 iOS 项目中

这一步我们需要用到XCode，选择assets文件夹与main.jsbundle文件将其拖拽到XCode的项目导航面板中即可。

然后，修改 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 来读取本地的 js bundle，方法如下：

- (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 等几大步骤。

因为官方文档中有详细的说明，在这我就不再重复了。