Reactive-Native学习：iOS工程内嵌React-Native(二)

继（一）成功后，进入第二步，似乎一切都不是那么顺利，按照官方文档进行下一步，进行到Start Development Server这一步时又出现问题了。

一切都缘于对npm命令的不熟悉吧，还有官方文档的不及时更新挖了很多的坑。

首先是执行启支服务命令

(JS_DIR=`pwd`/ReactComponent; cd Pods/React; npm run start -- --root $JS_DIR)

由于项目Pod React的时候用的是官方的配置：

pod 'React', :path => '../node_modules/react-native', :subspecs => [
  'Core',
  'RCTImage',
  'RCTNetwork',
  'RCTText',
  'RCTWebSocket',
  # Add any other subspecs you want to use in your project
]

注：这里的path地址是你的react-native项目所在。

故这里cd找的应该是react-native下的React目录，可惜，失败了，报错：

先报

Error: Cannot find module 'babel-polyfill'

    at Function.Module._resolveFilename (module.js:338:15)

    at Function.Module._load (module.js:289:25)

    at Module.require (module.js:366:17)

    at require (module.js:385:17)

    at Object.<anonymous> (/Users/xxx/Project/react-native/packager/babelRegisterOnly.js:11:1)

    at Module._compile (module.js:425:26)

    at Object.Module._extensions..js (module.js:432:10)

    at Module.load (module.js:356:32)

    at Function.Module._load (module.js:313:12)

    at Module.require (module.js:366:17)

通过

npm install babel-polyfill 

解决后报：

Error: Cannot find module 'babel-core/register'

    at Function.Module._resolveFilename (module.js:338:15)

    at Function.Module._load (module.js:289:25)

    at Module.require (module.js:366:17)

    at require (module.js:385:17)

    at module.exports (/Users/xxx/Project/react-native/packager/babelRegisterOnly.js:28:3)

    at Object.<anonymous> (/Users/xxx/Project/react-native/local-cli/cli.js:11:41)

    at Module._compile (module.js:425:26)

    at Object.Module._extensions..js (module.js:432:10)

    at Module.load (module.js:356:32)

    at Function.Module._load (module.js:313:12)

这时觉得不对劲，应该是哪里出错了，后续还有什么错还不一定呢。于是网上寻找别的方案：

后来把Pod配置改成：

pod 'React'

pod 'React', :subspecs => [

'RCTText',

'RCTImage',

'RCTNetwork',

'RCTWebSocket'

]

后，启动服务就在项目的Pods/React下了，运行，果然成功，但是找不到ReactComponents目录下的js，也就是js根目录设置不成功导至，看终端的Log就知道。

 (这中间还有个不成功的小插曲，编译js bundle时失败，把项目下的Pods文件夹删除重新Pod install就可以了)

> [email protected] start /Users/xxx/Project/Test/Pods/React
> ./packager/packager.sh || true "--root" "/Users/xxx/Project/Test/ReactComponent"


 ┌────────────────────────────────────────────────────────────────────────────┐ 
 │  Running packager on port 8081.                                            │ 
 │                                                                            │ 
 │  Keep this packager running while developing on any JS projects. Feel      │ 
 │  free to close this tab and run your own packager instance if you          │ 
 │  prefer.                                                                   │ 
 │                                                                            │ 
 │  https://github.com/facebook/react-native                                  │ 
 │                                                                            │ 
 └────────────────────────────────────────────────────────────────────────────┘ 
Looking for JS files in
   /Users/xxx/Project/Test

寻找js文件的目录设置在项目根目录下了。

这是怎么回事呢？

后来在这篇文章里找到了答案:

启动服务的路径得改成：

JS_DIR=`pwd`/ReactComponent; cd Pods/React/packager; node packager.js --root $JS_DIR 

就ok了。

遇到 RCTRootView.h not found 等奇怪的问题实在找不出原因，就把Podfile、Podfile.lock、 Pods目录全清除掉从 Pod init开始重新生成一遍，有可能就ok了。

参考文章：http://blog.chenghu.me/tag/ios.html