ReactNative项目配置要点

这篇文章存在问题, 仅供参考, 完整配置参见:
http://www.jianshu.com/p/7a6639d67783

今天尝试运行ReactNative的Example项目, 在配置项目时候, 需要注意几点事项.

1. npm install缓慢

npm install运行很慢, 无法忍受, 更换缓存服务器可以加快速度.

npm install -g cnpm --registry=http://registry.npm.taobao.org

参考: http://blog.csdn.net/spy19881201/article/details/26943051

2. CocoaPods 配置

CocoaPods是iOS开发的库管理工具, ReactNative当然支持.
首先创建Podfile, 添加如下代码

    pod 'React'      pod 'React/RCTText'      # Add any subspecs you want to use in your project

然后运行

pod install

参考:
http://wiki.jikexueyuan.com/project/react-native/integration-existing.html
目前这个文档翻译缺少Android项目配置, Android已经是ReactNatvie不可或缺的部分, 跨平台终于成为可能, Android部分参考官网.

3. 缺少Module

在运行项目时, 本地服务器会报缺少模块的错误, 如

module.js:338      throw err;            ^  Error: Cannot find module 'escape-string-regexp'      at Function.Module._resolveFilename (module.js:336:15)      at Function.Module._load (module.js:278:25)      at Module.require (module.js:365:17)      at require (module.js:384:17)      at Object.<anonymous> (/Users/xxxx/Dev/GitHubLibrary/react-native/node_modules/chalk/index.js:2:26)      at Module._compile (module.js:460:26)      at Object.Module._extensions..js (module.js:478:10)      at Module.load (module.js:355:32)      at Function.Module._load (module.js:310:12)      at Module.require (module.js:365:17)

表示缺少模块, 在运行npm install后, 再安装模块

npm install escape-string-regexp

我尝试运行2048的Example项目, 需要下载非常多模块

npm install babel-core  promise  graceful-fs  debug  underscore  chalk  optimist  yeoman-environment  node-fetch  wordwrap  semver  connect  opn  absolute-path  uglify-js  bser  joi  sane  progress  worker-farm  image-size  fbjs-scripts  ws

so boring! 希望以后ReactNative配置能改进一些.

4. 命名冲突

这个比较简单, 删除重复的文件即可. 错误信息如

Error building DepdendencyGraph:   Error: Naming collision detected: /Users/wangchenlong/Exercises/Examples/react-native/Libraries/Animated/src/Easing.js collides with /Users/wangchenlong/Exercises/Examples/react-native/Examples/2048/Pods/React/Libraries/Animated/Easing.js      at HasteMap._updateHasteMap (/Users/wangchenlong/Exercises/Examples/react-native/packager/react-packager/src/DependencyResolver/DependencyGraph/HasteMap.js:123:13)      at /Users/wangchenlong/Exercises/Examples/react-native/packager/react-packager/src/DependencyResolver/DependencyGraph/HasteMap.js:95:28      at tryCallOne (/Users/wangchenlong/Exercises/Examples/react-native/node_modules/promise/lib/core.js:37:12)      at /Users/wangchenlong/Exercises/Examples/react-native/node_modules/promise/lib/core.js:103:15      at flush (/Users/wangchenlong/Exercises/Examples/react-native/node_modules/promise/node_modules/asap/raw.js:50:29)      at doNTCallback0 (node.js:417:9)      at process._tickCallback (node.js:346:13)  Process terminated. Press <enter> to close the window

服务器启动失败时会红屏, 解决就好了

OK, 这些都掌握了, 就可以处理大多数ReactNative项目了, 不过配置起来很麻烦.