已有项目集成React Native

来源:互联网 时间:2017-01-22


如何在已有项目使用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请求:



info.plist

如果终端出现下面的提示


[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的交互。




相关阅读:
Top