reactnative项目实践ppt大纲

reactnative

参考内容：
http://www.jianshu.com/p/6d4cce9d914f
http://www.lcode.org/319-react-native-sh-ppt-jiangqq/
http://img2.w3ctech.com/W3CTech美团React专场-ReactNative初探.pdf

内容目录

1、reactnative简介
2、reactnative集成到现有工程
3、reactnative与原生native通信
4、reactnative开发
5、reactnative打包和发布
6、reactnative热更新
7、reactnative升级服务器

一、reactnative简介

1、reactnaitve概述

• 使用Javascript和React开发原生应用
• Learn Once, Write Anywhere

2、reactnaitve的优劣势

• 优势
  1、相对于Hybrid App或者Web App
  近乎原生的体验
  2、相对于Native App
  更加灵活，不依赖版本发布
• 劣势
  学习成本大，需要前端和不同终端的配合

3、reactnaitve环境配置和安装

• 安装node: brew install node
• 安装watchman: brew install watchman
• 安装flow: brew install flow
• 安装RN命令行: npm install react-native-cli
• 创建RN项目: react-native init AwesomeProject

二、reactnative集成到现有工程

1、reactnative开发的两种形态

• 纯净React Native App
  淘宝
  携程
• 混合React Native App
  QQ空间
  繁星

2、集成到IOS工程

• 通过CocoaPods安装React Native

# 取决于你的工程如何组织，你的node_modules文件夹可能会在别的地方。
# 请将:path后面的内容修改为正确的路径。
pod 'React', :path => './node_modules/react-native', :subspecs => [
  'Core',
  'RCTImage',
  'RCTNetwork',
  'RCTText',
  'RCTWebSocket',
  # 添加其他你想在工程中使用的依赖。
]

$ pod install

• 手动集成React Native

• 第1步：安装react-native
  

• 第2步：添加reactnative相关.xcodeproj文件
  react-native/React/React.xcodeproj
react-native/Libraries/Network/RCTNetwork.xcodeproj
react-native/Libraries/Text/RCTText.xcodeproj
react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj
  

• 第3步：添加.a文件
  ReactnativeIOS -> TARGETS -> ReactnativeIOS -> Build Phases -> Link Binary Width Libraries
  

• 第4步：添加头文件搜索路径
  ReactnativeIOS -> TARGETS -> ReactnativeIOS -> Build Settings -> Header Search Paths，添加一条$(SRCROOT)/reactnative/node_modules/react-native/React，选择recursive

• 第5步：控制Xcode启动reactnative

三、reactnative与native通信

1、native加载RN视图

#import "ReactView.h"
#import <RCTRootView.h>
@implementation ReactView
- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";
        NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];
        RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                             moduleName:@"SimpleApp"
                                                      initialProperties:nil
                                                          launchOptions:nil];
        [self addSubview:rootView];
        rootView.frame = self.bounds;
    }
    return self;
}
@end

#import "ViewController.h"
#import "ReactView.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet ReactView *reactView;
@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    ReactView * reactView = [[ReactView alloc] initWithFrame:CGRectMake(0, 40, CGRectGetWidth(self.view.bounds), 100)];
    [self.view addSubview:reactView];
}
@end

2、native端添加模块

• #import "RCTBridgeModule.h"
• @interface ReactNativeCotroller : NSObject
• RCT_EXPORT_MODULE()
• RCT_EXPORT_METHOD(nativeDoSomething:(RCTResponseSenderBlock)callback)

3、js端调用

• var ReactNativeCotroller = React.NativeModules.ReactNativeCotroller;
• ReactNativeCotroller.nativeDoSomething(() => {console.log('nativeDoSomething')})

4、js端订阅事件

• var { NativeAppEventEmitter } = require('react-native');
• var subscription = NativeAppEventEmitter.addListener('EventReminder', (reminder) => console.log(reminder.name)
  );

5、native端发送事件

• [self.bridge.eventDispatcher sendAppEventWithName:@"EventReminder"]

四、reactnative开发

1、JSX

2、React

3、JavaScript

4、ES6

5、css-layout

6、Redux

五、reactnative打包

• IOS打包命令

$ react-native bundle
--entry-file index.ios.js
--bundle-output bundle/ios/index.ios.jsbundle
--platform ios
--assets-dest bundle/ios
--dev false

• Android打包命令

$ react-native bundle
--entry-file index.android.js
--bundle-output bundle/android/index.ios.jsbundle
--platform android
--assets-dest bundle/android
--dev false

• 打包目录
  

六、reactnative热更新

• 从服务器下载jsbundle包
  NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];

• 从本地加载jsbundle包
  NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"index.ios" withExtension:@"jsbundle"];

七、reactnative升级服务器简介

1、现有方案：

• CodePush
• Pushy
• HorsePush

2、繁星方案：

• 检查更新
  http://rnbundle.fanxing.com/patch/checkUpdate?bundleV=0.0.1&appV=2.9.5&platfrom=ios

• 下载全量包
  http://rnbundle.fanxing.com/bundle/ios/0.0.2.zip

• 下载差异包
  http://rnbundle.fanxing.com/patch/ios/0.0.1-0.0.2.zip

Thank you！