通过react-native到cli工具【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。创建并开发一个react-native应转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net用非常方便，甚至是一行命令解决所有开发中【未经授权禁止转载】未经授权，禁止复制转载。的问题。应用开发的差不多之后，打算安装到著作权归作者所有，禁止商业用途转载。【作者：唐霜】手机上进行测试，现在这个版本也非常方便，未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。只需要手机连到xcode，直接run b原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】uild就可以了，之前要改局域网配置，现【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net在也是免了，只要手机和电脑同处一个网络，【未经授权禁止转载】【作者：唐霜】手机都可以方便的进行调试。

【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】【转载请注明来源】

安装到手机上的坑【本文首发于唐霜的博客】

【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。

但当我们把手机连上电脑，直接执行run时【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。，大部分都会报错，因为我们需要解决app【版权所有，侵权必究】【转载请注明来源】lication的开发者账号问题。因为我本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】们是测试，所以，不需要去付费，只需要在x【版权所有，侵权必究】未经授权，禁止复制转载。code上添加登陆自己的开发者账号即可。【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net具体怎么操作呢？

著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】

1）手机连到电脑，连接时，如果弹出警告框本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。，选择信任该设备

【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】转载请注明出处：www.tangshuang.net

2）连接之后，进行开发者账号配置，如下图转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】：

【版权所有，侵权必究】【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net

【转载请注明来源】【转载请注明来源】【原创不易，请尊重版权】

第一次使用xcode的时候，并没有设置自著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。己的开发者账号，因此，要自己输入登陆，只【作者：唐霜】【本文首发于唐霜的博客】需要在team那个下拉中找到最后一项，打【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】开账户面包添加即可，只要你登陆了，它会自原创内容，盗版必究。未经授权，禁止复制转载。动下载开发者账号的一些信息。

原创内容，盗版必究。转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】

3）Tests里面也要选择正确的账号，这转载请注明出处：www.tangshuang.net【作者：唐霜】里是坑，我一开始没有选这里，总是报错无法【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】通过，它是在做test的时候使用的账号

【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【作者：唐霜】

【未经授权禁止转载】【作者：唐霜】【未经授权禁止转载】

4）在device里面选择你自己的手机作原创内容，盗版必究。【未经授权禁止转载】为目标设备

未经授权，禁止复制转载。【未经授权禁止转载】本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。

【转载请注明来源】转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net【本文受版权保护】著作权归作者所有，禁止商业用途转载。

转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net

5）点击界面左上角的三角形按钮运行构建，本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.netxcode会自动将应用安装到你的ipho本文作者：唐霜，转载请注明出处。【本文受版权保护】ne上，但是，第一次安装会有一个警告框弹【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。出，这主要是因为我们通过普通开发者账号构【转载请注明来源】未经授权，禁止复制转载。建的应用没有证书，默认是不被信任的，你需【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。要回到你的iphone中，打开“sett未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.netings-general- Profil本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。es & Device Mana转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。gement”，点击你的开发者账号，进去【原创内容，转载请注明出处】【原创不易，请尊重版权】之后点击“Trust”字样的选项。信任之原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。后，你就可以在自己的iphone上打开刚【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】安装的应用。

转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】未经授权，禁止复制转载。原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】

安装一个Pre-release测试版本【访问 www.tangshuang.net 获取更多精彩内容】

转载请注明出处：www.tangshuang.net原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】

但是react-native的cli工具转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net仅默认提供了开发阶段的工具，即react本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net-native start工具，它的工作本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】机制是，在你的设备（模拟器）上打开app【关注微信公众号：wwwtangshuangnet】【转载请注明来源】之后，连接到你当前进行开发的电脑上，下载未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。jsbundle并解析执行，当你触发刷新【原创内容，转载请注明出处】【原创内容，转载请注明出处】（ctrl+D）的时候，app内部通过s转载请注明出处：www.tangshuang.net原创内容，盗版必究。ocket发送消息给电脑，电脑上的服务会【本文首发于唐霜的博客】原创内容，盗版必究。重新build一个jsbundle，并通本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】知app，app收到通知后，会重新下载这【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net个新的jsbundle，并重新解析执行。【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。另外，debug模式（等下说）下很多调试原创内容，盗版必究。未经授权，禁止复制转载。用的东西会出现在app界面上，例如app本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。加载jsbundle的进度、app内部报【作者：唐霜】【版权所有】唐霜 www.tangshuang.net错底部弹出黄色区域进行提示。这些东西都是著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】为了开发方便进行使用的，而不是为了测试。

本文作者：唐霜，转载请注明出处。【未经授权禁止转载】【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】

当我们要创建一个pre-release的本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。测试版本安装到手机上时，我们一方面要去除转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。那些开发才用到的界面信息，另一方面要创建本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】一个静态的jsbundle放在app内部【版权所有，侵权必究】未经授权，禁止复制转载。一直使用，而不是每次启动app都要从某个转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。地址去下载。接下来，我们就来一步一步操作【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net：

【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net

1）APP图标著作权归作者所有，禁止商业用途转载。

【原创内容，转载请注明出处】【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net

【转载请注明来源】本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】

在xcode左侧的项目中，找到image【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.nets.xcassets目录，点击之后，在右【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。侧点击AppIcon。这个地方上传ico【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】n比较坑，没有按钮，而是要你打开ifin【转载请注明来源】【版权所有】唐霜 www.tangshuang.netder，然后把icon拖到对应的图标位置【版权所有】唐霜 www.tangshuang.net【转载请注明来源】里面去。你需要准备如下尺寸的icon：1著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。024, 180, 120, 87, 8本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。0, 60, 58, 40。你尽管随便拖本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。图片进去，尺寸不符的时候会有警告提示图标原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。出现。

【版权所有，侵权必究】原创内容，盗版必究。【未经授权禁止转载】

2）修改启动界面【本文受版权保护】

未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】【原创内容，转载请注明出处】【本文首发于唐霜的博客】

修改位置在LaunchScreen里面，【本文首发于唐霜的博客】【版权所有，侵权必究】也可以在文件ios/[AppName]/【转载请注明来源】【未经授权禁止转载】Base.lproj/LaunchScr【转载请注明来源】【版权所有】唐霜 www.tangshuang.neteen.xib里面修改。

转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。【本文受版权保护】【作者：唐霜】

3）创建一个静态的jsbundle【原创内容，转载请注明出处】

本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。原创内容，盗版必究。

react-native的cli工具（r【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。eact-native-cli）默认只在【本文首发于唐霜的博客】【原创内容，转载请注明出处】我们的package.json里面加了s【版权所有】唐霜 www.tangshuang.net【作者：唐霜】tart命令，没有加build命令，因此原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】，我们要自己添加一个命令用来创建一个js【本文受版权保护】【原创不易，请尊重版权】bundle。

原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net原创内容，盗版必究。【版权所有，侵权必究】

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

上面的红色语句是从官网的文档搬过来的，接【未经授权禁止转载】转载请注明出处：www.tangshuang.net下来你要在命令行里面执行：

著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。原创内容，盗版必究。【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net

npm run build:ios

不过这里有个点，就是我直接在npm sc【作者：唐霜】【作者：唐霜】ript命令里面使用了react-nat本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。ive，如果你要在服务器上面做CI集成，著作权归作者所有，禁止商业用途转载。【转载请注明来源】为了保险起见，可以把上面的react-n【转载请注明来源】著作权归作者所有，禁止商业用途转载。ative替换为“node node_modules/react-native/local-cli/cli.js”这样能保证软链失效的时候可以做buil转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。d。

【原创不易，请尊重版权】【未经授权禁止转载】【本文首发于唐霜的博客】原创内容，盗版必究。

执行完上面的npm命令之后，你可以在io【未经授权禁止转载】【转载请注明来源】s目录下找到main.jsbundle这未经授权，禁止复制转载。【本文首发于唐霜的博客】个文件，而且assets文件夹也产生了。

【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】

4）修改jsbundle获取位置【版权所有】唐霜 www.tangshuang.net

原创内容，盗版必究。本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。

在ios/[AppName]/Base.本文作者：唐霜，转载请注明出处。【本文受版权保护】lproj/AppDelegate.m文转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。件中找到jsCodeLocation，把本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net它的赋值语句进行修改：

原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net

  jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
  //jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

下面被注释掉的，是react-nativ【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】e生成项目的时候使用的，也就是我们开发时【作者：唐霜】【版权所有】唐霜 www.tangshuang.net的配置，上面一句是官方文档里面给的，用来【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。加载静态jsbundle的。

【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】【本文受版权保护】未经授权，禁止复制转载。

5）调整build模式原创内容，盗版必究。

著作权归作者所有，禁止商业用途转载。【本文受版权保护】【作者：唐霜】【未经授权禁止转载】【原创不易，请尊重版权】

在xcode中，要修改debug模式为r【作者：唐霜】原创内容，盗版必究。elease模式：

【转载请注明来源】原创内容，盗版必究。【作者：唐霜】【本文首发于唐霜的博客】

【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。

本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。【本文受版权保护】

左侧有好几个选项，都要在右边修改为rel【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。ease。

【原创内容，转载请注明出处】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。

6）run【未经授权禁止转载】

【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】

完成上面之后，点击run按钮，将应用安装本文作者：唐霜，转载请注明出处。原创内容，盗版必究。到手机上，可以在手机上愉快测试了。

未经授权，禁止复制转载。【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net

2018-06-18 6012