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項目了, 不過配置起來很麻煩.