[关闭]
@garygchai 2016-05-18T16:32:24.000000Z 字数 3783 阅读 2066

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
  1. # 取决于你的工程如何组织,你的node_modules文件夹可能会在别的地方。
  2. # 请将:path后面的内容修改为正确的路径。
  3. pod 'React', :path => './node_modules/react-native', :subspecs => [
  4. 'Core',
  5. 'RCTImage',
  6. 'RCTNetwork',
  7. 'RCTText',
  8. 'RCTWebSocket',
  9. # 添加其他你想在工程中使用的依赖。
  10. ]
  1. $ pod install
  • 手动集成React Native
  • 第1步:安装react-native
    reactnative_dir

  • 第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
    Add React Libaries

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

  • 第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视图

  1. #import "ReactView.h"
  2. #import <RCTRootView.h>
  3. @implementation ReactView
  4. - (instancetype)initWithFrame:(CGRect)frame
  5. {
  6. if (self = [super initWithFrame:frame]) {
  7. NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";
  8. NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];
  9. RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
  10. moduleName:@"SimpleApp"
  11. initialProperties:nil
  12. launchOptions:nil];
  13. [self addSubview:rootView];
  14. rootView.frame = self.bounds;
  15. }
  16. return self;
  17. }
  18. @end
  1. #import "ViewController.h"
  2. #import "ReactView.h"
  3. @interface ViewController ()
  4. @property (weak, nonatomic) IBOutlet ReactView *reactView;
  5. @implementation ViewController
  6. - (void)viewDidLoad {
  7. [super viewDidLoad];
  8. ReactView * reactView = [[ReactView alloc] initWithFrame:CGRectMake(0, 40, CGRectGetWidth(self.view.bounds), 100)];
  9. [self.view addSubview:reactView];
  10. }
  11. @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打包命令
  1. $ react-native bundle
  2. --entry-file index.ios.js
  3. --bundle-output bundle/ios/index.ios.jsbundle
  4. --platform ios
  5. --assets-dest bundle/ios
  6. --dev false
  • Android打包命令
  1. $ react-native bundle
  2. --entry-file index.android.js
  3. --bundle-output bundle/android/index.ios.jsbundle
  4. --platform android
  5. --assets-dest bundle/android
  6. --dev false
  • 打包目录
    bundle目录

六、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!

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注