已有项目集成React Native

如何在已有项目使用React Native， 这里你会碰到很多坑， 你会发现很多网上的demo语法是不对的， 然而你并不知道，你会在尝试使用react-native init的方式， 但这显然也是不对的。

1. 首先你需要新建一个工程IntegratedRN， 然后将node_modules文件夹（里面有react， react-native文件夹， 之前用react-native init生成的项目里面有这个文件夹）复制到项目的根目录，挺慢的, 可能要10分钟，别着急，喝杯咖啡，要等都复制完才行。
2. 新建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请求：

info.plist

如果终端出现下面的提示

[17:16:11] Crawling File System (2303ms)
[17:16:11] Building in-memory fs for JavaScript
[17:16:12] Building in-memory fs for JavaScript (1570ms)
[17:16:12] Building in-memory fs for Assets
[17:16:13] Building in-memory fs for Assets (1004ms)
[17:16:13] Building Haste Map
[17:16:14] Building (deprecated) Asset Map
[17:16:14] Building (deprecated) Asset Map (244ms)
[17:16:14] Building Haste Map (578ms)
[17:16:14] Building Dependency Graph (5536ms)
[17:16:14] request:/index.ios.bundle?platform=ios&dev=true
[17:16:14] find dependencies
transformed 631/631 (100%)

说明已经成功了。
下面就可以随意在index.ios.js里修改render中的代码了，下面一篇将继续介绍react和native的交互。