升级至 Xcode10.2 带来的坑

如果你的 React Native 项目之前一直运行的没有问题,但升级至 Xcode10.2 后发现很多莫名其妙的问题,请跟着我一步步来排查。

1、无法编译通过

用新版 Xcode 10.2 打开 iOS 项目,逐步找到 File -> Project Settings -> Build System

将默认的 New Build System 更改为 Legacy Build System,如下图所示:

File -> Project Settings -> Build System -> Legacy Build System

1.1 New Build System 与 Legacy Build System 是什么关系

因为苹果以 Xcode 9 后就添加了一个名为 New Build System 构建系统,值为默认不选中。但 Xcode 升级至 10.2 后就改成了默认选中,到现在(2019-4-19)Facebook 还没有修复好,所以我们就「倒霉」了。

Legacy Build System 意为传统构建系统,只需切换至该选项即可正常 build 项目。

1.2 New Build System 有什么特点

New Build System 更加严格检测循环引用,并且会给出提示,如图:

这对程序员很友好,可以更方便检测出循环引用,避免内存泄漏。New Build System 不支持标准的 Clean,改为支持 Clean Build Folder

注:如果你公司有 CI 系统,先别着急把 CI 系统的那台电脑升级至 Xcode 10.2。

2、react-native run-ios 无法运行

当我们按照之前的方式,react-native run-ios,会报 Could not find iPhone X simulator我暂时还没有找到好的解决办法,等待 facebook 来修复这个 bug,我们先用 Xcode 来 Build 项目(2019-4-19)

好消息来了,终于被我找到办法解决了(2019-4-20)。

新建一个名为 fix-find-matching-simulator.js,放在文件存在如:src/utils/ 目录下,然后将如下代码粘贴进去:

const fs = require('fs');
const path = require('path');

// 注意:这里退 2 层,是因为我放到 src/utils/ 里去了
const projectPath = `${__dirname}/../..`;  

const jsFile = '/node_modules/react-native/local-cli/runIOS/findMatchingSimulator.js';

const jsFilePath = path.resolve(projectPath + jsFile);

try {
  let fileContent = fs.readFileSync(jsFilePath, 'utf-8');
  const originValue1 = /'iOS'/g;
  const replaceValue1 = "'com.apple.CoreSimulator.SimRuntime.iOS'";
  fileContent = fileContent.replace(originValue1, replaceValue1);

  const originValue2 = /'tvOS'/g;
  const replaceValue2 = "'com.apple.CoreSimulator.SimRuntime.tvOS'";
  fileContent = fileContent.replace(originValue2, replaceValue2);
  fs.writeFileSync(jsFilePath, fileContent, 'utf8');
   console.log('🎉 🎉 🎉, cannot find matching simulator 🐛 is fixed 👍👍👍.');
} catch (e) {
  console.log(e);
}

然后在 package.json 里添加如下命令脚本

  "scripts": {
   ...
    "fix-find-matching-simulator": "node src/utils/fix-find-matching-simulator.js",
   ...
  },

以后每次只需 yarn fix-find-matching-simulator or npm run fix-find-matching-simulator 即可。

你可能会问,我执行 yarn 或 npm 后,这个文件里的内容不就退回去了吗?

我已经替你考虑好了,只需在 scripts 里加两行就好了,代码如下:

  "scripts": {
   ...
    "fix-find-matching-simulator": "node src/utils/fix-find-matching-simulator.js",
    "postinstall": "yarn fix-find-matching-simulator",
    "postuninstall": "yarn fix-find-matching-simulator",
   ...
  },

参考文档:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容