React Native发布APP之打包iOS应用

标签: ios 发布 app 打包发布 rn打包发布
9783人阅读 评论(0) 收藏 举报
分类:

了解更多,可学习《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》

查看评论

用GDB调试程序(五)

 查看运行时数据———————        在你调试程序时,当程序被停住时,你可以使用print命令(简写命令为p),或是同义命令inspect来查看当前程序的运行数据。print命令的格式是:  ...
  • haoel
  • haoel
  • 2003-07-09 08:30:00
  • 54447

React-Native 项目打包(iOS/Android)

1. Android 打包 第一步:生成Android签名证书 签名APK需要一个证书用于为APP签名,生成签名证书可以Android Studio以可视化的方式生成,也可以使用终端采用命令行的方...
  • sinat_34380438
  • sinat_34380438
  • 2017-08-03 10:57:20
  • 2135

react native ios打包到真机

每当在模拟器上完成了开发,都想到真机上秀秀,正好前段时候买了一个mac,哈哈有机会了。   前篇文章以android为例,这里就以ios为例,讲一下打包到iphone真机的流程。 ...
  • birthmarkqiqi
  • birthmarkqiqi
  • 2017-06-23 18:15:32
  • 691

react-native ios端真机调试 打包与发布

最近做了一个项目,用的react-native 开发的iso项目。 由于自己没有oc基础,所以该项目几乎全用js写得。(顺便说一下,react-native 开发,最好还是学一下原生,起码的看得懂,不...
  • jiejiegua
  • jiejiegua
  • 2017-01-22 16:29:16
  • 6038

react native学习笔记26——iOS原生模块的封装与调用

1.前言 上一篇文章介绍封装Android原生模块,今天将介绍如何封装ios原生模块供React native调用。在React Native中,ios平台原生模块是一个实现了RCTBridgeMo...
  • teagreen_red
  • teagreen_red
  • 2018-02-27 19:42:37
  • 78

React Native之打包

用React Native开发好APP之后,如何将APP发布到市场以供用户使用呢?不管是Android还是ios等原生app走的都是:签名打包—>发布到各store这两大步骤。本文将对Android和...
  • xiangzhihong8
  • xiangzhihong8
  • 2017-04-13 22:23:20
  • 4814

React-Native打包发布(Android)

前言:一下搞原生app一下搞rn,搞rn的时候吧想着自己原生都还这么水,搞原生的时候吧觉得自己rn不敲就忘了,都有点力不从心了哈,不过还是加油吧~~~!!!下面说一下react-native怎么发布a...
  • vv_bug
  • vv_bug
  • 2017-03-06 17:15:27
  • 6349

React-Native工程项目打包编译发布过程详解

前言现在大红大紫的React-Native框架热度可谓与日俱增,React-Native的热更新操作,在开发过程中的确带来很多好处,但是对于发布来讲,不同平台却不尽相同, 下面来具体看一下Androi...
  • jiangbo_phd
  • jiangbo_phd
  • 2017-01-03 19:51:07
  • 6912

React Native发布APP之签名打包APK

用React Native开发好APP之后,如何将APP发布以供用户使用呢?一款APP的发布流程无外乎:签名打包—>发布到各store这两大步骤。本文将向大家分享如何签名打包一款React Nativ...
  • fengyuzhengfan
  • fengyuzhengfan
  • 2016-07-19 19:44:34
  • 10830

Windows10环境下React Native打包的个人实践

参考文档: ReactNative 中文网 ReactNactive qq群 搭建React Native for Android Windows...
  • gangoogle
  • gangoogle
  • 2016-04-15 13:42:00
  • 2348
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 107万+
    积分: 1万+
    排名: 1385
    你需要的,才是干货@开源项目
    博客专栏
    最新评论