Xcode 8 Swift 项目 集成 React Native 踩坑记

对照官方文档，尝试对已有的 iOS 项目中的页面使用 ReactNative 实现。

开发环境

• Xcode 8
• Swift 3
• CocoaPods 1.1.1
• node: v7.8.0

参考文档：Integration With Existing Apps

package.json 中的版本号

碰到的第一个问题是，修改 podfile 后，pod install 失败。

Xcode 8 需要使用新版 React Native

{ 
  "name": "YourTargetName", 
  "version": "5.2.10", 
  "private": true, 
  "scripts": { 
    "start": "node node_modules/react-native/local-cli/cli.js start" 
  }, 
  "dependencies": { 
    "react": "16.0.0-alpha.6", 
    "react-native": "facebook/react-native#master" 
  } 
} 

podfile 中需要添加 yoga

按官方文档修改好 podfile，进行 pod udpate 时，报错：

[!] Unable to find a specification for `Yoga (= 0.42.3.React)` depended upon by `React/Core`

需要在 pod file 中手动添加 yoga：

    # Your 'node_modules' directory is probably in the root of your project,
    # but if not, adjust the `:path` accordingly
    pod 'React', :path => '../node_modules/react-native', :subspecs => [
        'Core',
        'RCTText',
        'RCTNetwork',
        'RCTWebSocket', # needed for debugging
        # Add any other subspecs you want to use in your project
    ]
    pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

update: 2017年9月18号，按上面的 pod file 执行 pod update，提示 Yoga 不存在，将小写的 yoga 改成大写的 Yoga 后通过。

update: 如果碰到 Undefined symbols for architecture x86_64 问题，需要把 CxxBridge 加到 React 的 subspecs 中，参考：[iOS] Undefined symbols for architecture x86_64 #14925

update: podfile 还可能存在其他问题，碰到问题时可以参考这个例子里的配置：native-navigation-boilerplate/ios/Podfile

pod install 之后……

报错：

jschelpers/JavaScriptCore.h file not found

相关的 github issue：jschelpers/JavaScriptCore.h file not found #13010

根据 issue 里的反馈，将 Cocoapods 版本从 1.1.1 更新到 1.2.0 可以解决。

npm start...failed

Yans-MacBook-Pro:iOS qianyan$ npm start

> YourTargetName@5.2.10 start /Users/qianyan/Documents/YourTargetName/iOS
> node node_modules/react-native/local-cli/cli.js start

module.js:472
    throw err;
    ^

Error: Cannot find module 'jest-haste-map'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> 

解决方法：安装缺失的 npm package。参考这个 issue

npm install jest-haste-map --save

npm start 可以正常启动了，然而

Bundling `index.ios.js`  99.0% (405/407), failed.

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset packager cache: `rm -fr $TMPDIR/react-*` or `npm start -- --reset-cache`.

    ...

按提示依次执行下面的命令，终于可以跑起来了：

watchman watch-del-all
rm -rf node_modules && npm install
npm start --reset-cache