http://git.devzeng.com/blog/hello-react-native.html已这个为主
http://www.jianshu.com/p/32c24737fee8这个辅助
https://github.com/facebook/react-native/issues/5191错误辅助
2.安装Homebrew,后面安装Watchman和Flow推荐使用Homebrew安装
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
如果之前安装过Homebrew,可以先更新下:
brew update && brew upgrade
3.安装node.js
(1)安装nvm(Node Version Manager)
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.30.2/install.sh | bash
(2)安装最新版本的Node.js
nvm install node && nvm alias default node
当然可以直接到Node.js官网下载dmg文件直接安装,下载地址是https://nodejs.org/download/
4.建议安装watchman:
brew install watchman
5.安装flow:
brew install flow
ok,按照以上步骤,你应该已经配置好了环境。
在现有项目中集成
1.CocoaPods
推荐使用CocoaPods的方式进行集成,如果没有使用过,可以参考《使用CocoaPods管理iOS项目中的依赖库》这篇文章安装配置。
2.安装react-native package
react native现在使用npm的方式进行安装
(1)如果没有安装Node.js,需要按照前面的方式进行安装
(2)安装完Node.js之后再项目根目录(.xcodeproj文件所在目录)下执行npm install react-native的命令,执行完成之后会创建一个node_modules的文件夹。
3.修改Podfile配置
在项目根目录下的Podfile(如果没有该文件可以使用pod init命令生成)文件中加入如下代码:
12345678
pod 'React', :path => './node_modules/react-native', :subspecs => ['Core','RCTImage','RCTNetwork','RCTText','RCTWebSocket',#添加其他需要的subspecs]
如果你在项目中使用了的组件,那么你必须添加RCTText的subspecs。配置完成之后执行pod install即可。
4.编写React Native代码
(1)在项目的根目录创建存放React Native代码的目录:
1
mkdir ReactComponent
(2)新建一个示例的index.ios.js的代码
1
touch ReactComponent/index.ios.js
index.ios.js文件内容,示例如下:
1234567891011121314151617181920212223242526
'use strict';var React = require('react-native');var {Text,View} = React;var styles = React.StyleSheet.create({container: {flex: 1,backgroundColor: 'red'}});class SimpleApp extends React.Component {render() {return (This is a simple application.)}}React.AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
SimpleApp即为你的Module Name,在后面会使用到。
在这里插入 辅助的
为了代码干净一些, 创建一个UIView的子类ReactView.
// ReactView.h#import@interfaceReactView:UIView@end
在管理这个视图控制器里, 加入这个视图.
// ViewController.m@interfaceViewController()@property(weak,nonatomic)IBOutletReactView *reactView;@end
这里为了简化, 禁用了AutoLayout. 在实际的项目里, 你应该打开AutoLayout并且设置好约束.
#import"ReactView.h"
#import"RCTRootView.h"
@implementationReactView
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect {
// Drawing code
}
*/
-(void)awakeFromNib{
NSURL*jsCodeLocation = [NSURLURLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
RCTRootView*rootView = [[RCTRootViewalloc]initWithBundleURL:jsCodeLocation
moduleName:@"SimpleApp"
initialProperties:nil
launchOptions:nil];
[selfaddSubview:rootView];
rootView.frame=self.bounds;
}
@end
5.在项目中加载React Native代码
React Native不是通过UIWebView的方式进行代码的加载,而是使用了RCTRootView自定义的组件。RCTRootView提供了一个初始化的方法,支持在初始化视图组件的时候加载React的代码。
1234
- (instancetype)initWithBundleURL:(NSURL *)bundleURLmoduleName:(NSString *)moduleNameinitialProperties:(NSDictionary *)initialPropertieslaunchOptions:(NSDictionary *)launchOptions;
使用方式如下:
1234567
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocationmoduleName: @"SimpleApp"initialProperties:nillaunchOptions:nil];[self.view addSubview:rootView];rootView.frame = self.view.bounds;
需要指出的是在初始化的时候支持通过URL的方式进行加载,上面的方法是在线的服务器地址使用在发布环境下替换localhost为正式服务器的地址,另外一个是Bundle的路径地址,示例如下:
1
NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
为了生成jsbundle文件,可以通过下面的命令:
curl http://localhost:8081/index.ios.bundle -o main.jsbundle
6.启动Development Server
终端进入项目所在根目录,执行下面的代码
1
(JS_DIR=`pwd`/ReactComponent; cd node_modules/react-native; npm run start -- --root $JS_DIR)
启动完成之后可以通过:http://localhost:8081/index.ios.bundle进行调用
这时候会发现错误
进入 cd /Users/jidao/Desktop/测试/ReactNative测试开发/最新/wc/node_modules/react-deep-force-update
删掉他 rm .babelrc 再次运行脚本,跑个程序ok了
2024 - 快车库 - 我的知识库 重庆启连科技有限公司 渝ICP备16002641号-10
企客连连 表单助手 企服开发 榜单123