如何在已有项目使用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的交互。
网友评论