如何在已有項目使用React Native， 這里你會碰到很多坑， 你會發現很多網上的demo語法是不對的， 然而你并不知道，你會在嘗試使用react-native init的方式， 但這顯然也是不對的。
- 首先你需要新建一個工程IntegratedRN， 然后將node_modules文件夾（里面有react， react-native文件夾， 之前用react-native init生成的項目里面有這個文件夾）復制到項目的根目錄，挺慢的, 可能要10分鐘，別著急，喝杯咖啡，要等都復制完才行。
- 新建Podfile， 對于搞iOS的同學應該不陌生， 但是前端的同學可能要懵逼了， Podfile是你所有引用的第三方庫的目錄， 通過Podfile install命令可以導入第三方庫。這里也很慢
這里你pod的版本不同Podfile寫法不一樣
platform :ios, '7.1'
# Depending on how your project is organized, your node_modules directory may be
# somewhere else; tell CocoaPods where you've installed react-native from npm
pod 'React', :path => './node_modules/react-native', :subspecs => [
'Core',
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket',
# Add any other subspecs you want to use in your project
]
pod verison 1.1.0.beta.1
target 'IntegratedRN' do
# Depending on how your project is organized, your node_modules directory may be
# somewhere else; tell CocoaPods where you've installed react-native from npm
pod 'React', :path => './node_modules/react-native', :subspecs => [
'Core',
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket',
# Add any other subspecs you want to use in your project
]
此時你的目錄結構應該是這樣的
這時候你可以打開IntegratedRN.xcworkspace是可以編譯過的。但是離運行還有一定距離。
修改ViewController的代碼
#import "ViewController.h"
#import "RCTRootView.h"
@interface ViewController ()
@property (nonatomic, weak) RCTRootView *rootView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
NSURL *jsCodeLocation;
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"IntegratedRN"
initialProperties:nil
launchOptions:nil];
[self.view addSubview:rootView];
self.rootView = rootView;
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
- (void)viewDidLayoutSubviews {
self.rootView.frame = CGRectMake(0, 0, self.view.frame.size.width, 300);
[super viewDidLayoutSubviews];
}
@end
可以看到rootView作為VC的一個子view添加進來， 而具體的UI是在index.ios.js中用JSX（一種JavaScript的語法糖）寫的。
首先這時候， 你會發現npm start 報錯（為什么啟動服務器，因為要動態下載index.ios.js， 相當于本地假設服務器， index.ios.js實際是放到服務端的。）
npm ERR! Darwin 15.5.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
npm ERR! node v4.4.0
npm ERR! npm v2.14.20
npm ERR! path /Users/yy/Desktop/git/ReactNative/IntegratedRN/package.json
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall open
npm ERR! enoent ENOENT: no such file or directory, open '/Users/yy/Desktop/git/ReactNative/IntegratedRN/package.json'
npm ERR! enoent This is most likely not a problem with npm itself
npm ERR! enoent and is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! Please include the following file with any support request:
npm ERR! /Users/yy/Desktop/git/ReactNative/IntegratedRN/npm-debug.log
意思就是package.json找不到了，把init方法生成的package.json文件復制到項目根目錄就ok, 注意這里只是讓你啟動服務端。啟動服務器
npm start
如果發現下面的提示
[Hot Module Replacement] Server listening on /hot
React packager ready.
這時候已經離成功很近了，但是你可能會不斷看到下面的錯誤
連接不上服務器, 原因是服務端可能已經斷開了，看下終端的狀態就知道了。這里有一個坑，新手必踩的， 就是ATS的設置， iOS9默認情況下，新建的項目是不允許非https請求的，但是你可以在info.plist里設置允許http請求：
如果終端出現下面的提示
[17:16:11] <END> Crawling File System (2303ms)
[17:16:11] <START> Building in-memory fs for JavaScript
[17:16:12] <END> Building in-memory fs for JavaScript (1570ms)
[17:16:12] <START> Building in-memory fs for Assets
[17:16:13] <END> Building in-memory fs for Assets (1004ms)
[17:16:13] <START> Building Haste Map
[17:16:14] <START> Building (deprecated) Asset Map
[17:16:14] <END> Building (deprecated) Asset Map (244ms)
[17:16:14] <END> Building Haste Map (578ms)
[17:16:14] <END> Building Dependency Graph (5536ms)
[17:16:14] <START> request:/index.ios.bundle?platform=ios&dev=true
[17:16:14] <START> find dependencies
transformed 631/631 (100%)
說明已經成功了。
下面就可以隨意在index.ios.js里修改render中的代碼了，下面一篇將繼續介紹react和native的交互。
