RN学习1——前奏，app插件化和热更新的探索 - (void)viewDidLoad {
[super viewDidLoad];
UIButton* startRNVC = [[UIButton alloc] initWithFrame:CGRectMake(20, 50, 60, 40)];
[startRNVC setTitle:@"Start RN" forState:UIControlStateNormal];
[startRNVC addTarget:self action:@selector(gotoRN) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:startRNVC];
}

- (void) gotoRN {
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"AwesomeProject"
initialProperties:nil
launchOptions:nil];
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
UIViewController *rootViewCOntroller= [UIViewController new];
rootViewController.view = rootView;
[self.navigationController pushViewController:rootViewController animated:YES];
}

2、OC中等待RN调起的部分

RN有比较完整的调用代码，只要按步骤做就好了。关键是RCT_EXPORT_MODULE这个宏，会在class的load方法中进行register，这点和js-bridge的方案很像。

@implementation SpringBoard
RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(gotoIM:(RCTResponseSenderBlock)callback)
{
  AppDelegate* appdelegate = (AppDelegate*) [UIApplication sharedApplication].delegate;
  UINavigationController *cOntroller= (UINavigationController*)[appdelegate.window rootViewController];
  CDLoginVC *loginVC = [[CDLoginVC alloc] init];
  [controller pushViewController:loginVC animated:YES];
  callback(@[[NSNull null]]);
}

- (dispatch_queue_t)methodQueue
{
  return dispatch_get_main_queue();
}
@end

3、RN部分调起Native

RN还不是很理解，就把代码都贴上来了。这里会在页面启动时候直接alert出来，点击会再跳回native部分。

'use strict';

var React = require('React');

var RN = require('react-native');
var {
  Image,
  AppRegistry,
  ListView,
  StyleSheet,
  Text,
  View,
  AlertIOS,
} = RN;


var styles = RN.StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

function setup(): React.Component {
  AlertIOS.alert(
    'Foo Title',
    'My Alert Msg',
    [
      {text: 'Foo', onPress: function FooClick() {
        var SpringBoard = RN.NativeModules.SpringBoard;
        SpringBoard.gotoIM((events) => { });
      }},
      {text: 'Bar', onPress: () => console.log('Bar Pressed!')},
    ]

  )
  class AwesomeProject extends React.Component {

    render() {
      return <View style={styles.container}>
 <Text>This is a simple application.Text>
 View>;
    }
  }
  return AwesomeProject;
}

AppRegistry.registerComponent('AwesomeProject', setup);

总结：事实上，效果很好，轻松实现了混编和调用，考虑到RN在调起Native部分需要OC进行代码定制化编写，所以未来考虑增加其与jspatch的协作，增强其能力；android部分还需要继续研究，相信不是问题（QZone已经在进行相关的研究和应用了）。

学习计划和曲线

我个人是一个双平台开发者，同时对hybird编程比较感兴趣，也做过一些研究和尝试，所以RN中关于平台接口部分、原理以及js-native交互部分学习是比较平缓的。但我Javascript只是一点三脚猫功夫，更别提ES6、React一个有一个生僻而又让然懵逼的名字，还有node.js等等神一样的存在...这部分估计学习要非常陡峭。

本着先难后易的原则，学习部分会优先进行ES6标准的基本语法和习惯开始，然后通过改造QDaily一个模块进行React和RN的熟悉，在其中不断学习f8的代码和使用方式，并在过程中将RN彻底融入原有app项目中。

这过程可能需要一本基于ES6的Javascript的书籍，一套比较权威的RN教程和文档，f8的代码以及针对其的解读，还有若干大牛的博客和社区。

本文结束

mark一下本文的参考文献，以及可能要学习的一些东西：

• React Native 从入门到原理。文章太好，在宏观上一下子就知道RN是怎么回事了，非常建议app开发这作为RN的入门文章
• React 入门实例教程。了解下React的编程语法习惯很重要，而且说实话，React真的很潮流，代码风格很时尚、很性感。
• React Native 中文文档。不用说了，国人翻译版。
• React/React Native 的ES5 ES6写法对照表。过去知道的js皮毛都是基于ES5的，网上如果搜RN的代码估计也是ES5居多，这个文章可以用于对照学习。
• 一个不错的RN公众号，也许关注这一个就够了 codedev123。网站：http://www.lcode.org。
• 一系列f8的源码分析 http://www.jianshu.com/p/f7cb35436f9a。
• 构建 F8 App / React Native 开发指南。秋百万针对f8官方blog的翻译文章，对f8的学习很有价值。
• QZone mobile的公众号 qzonemobiledev，里面有好多RN4A的文章。
• 微软的react-native-code-push，据说很好用，RN最终用于生产环境的时候可以参考下：Github，使用CodePush热更新ReactNative JS代码，React Native项目更新。

http://www.jianshu.com/p/97c2fa718ee4