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项目了, 不过配置起来很麻烦.