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 => [
        '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

    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