用 React 编写移动应用 React Native

其实说真的，现在移动APP开发还是非常热门，而且产品报价都相对较高，不是说移动开发这部分开发人员工资高了，而是说很多开

发人员并没有很好的应用一些开发框架和方案导致开发周期长，工期变长，自然报价会很高。下面这个方案也是非常不错的。

目前芊雅企服一些移动APP开发都有用到相关开源框架。下面这种方案也是叼炸天的。

React Native 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。

而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。

官方网站：http://www.reactnative.com/

Github地址：https://github.com/facebook/react-native

React Native的原理是在JavaScript中用React抽象操作系统原生的UI组件，代替DOM元素来渲染，比如以<View>取代<div>，以<Image>替代<img>等。

在幕后，React Native在主线程之外，在另一个背景线程里运行JavaScript引擎，两个线程之间通过一批量化的async消息协议来通信（有一个专门的React插件）。

UI方面React Native提供跨平台的类似Flexbox的布局系统，还支持CSS子集。可以用JSX或者普通JavaScript语言，还有CoffeeScript和TypeScript来开发。有评论说，React的UI层模型要比UIKit好很多。

更好的是，由于基于Web技术，开发起来可以像在浏览器里那样随时在仿真程序中查看应用运行情况，刷新一下就行，无需编译，爽吧。

React Native比起标准Web开发或原生开发能够带来的三大好处：

手势识别：基于Web技术（HTML5/JavaScript）构建的移动应用经常被抱怨缺乏及时响应。而基于原生UI的React Native能避免这些问题从而实现实时响应。
原生组件：使用HTML5/JavaScript实现的组件比起原生组件总是让人感觉差一截，而React Native由于采用了原生UI组件自然没有此问题。
样式和布局：iOS、Android和基于Web的应用各自有不同的样式和布局机制。React Native通过一个基于FlexBox的布局引擎在所有移动平台上实现了一致的跨平台样式和布局方案。

原生 iOS 组件：

var React = require('react-native');
var { TabBarIOS, NavigatorIOS } = React;

var App = React.createClass({
render: function() {
return (
<TabBarIOS>
<TabBarIOS.Item title="React Native" selected={true}>
<NavigatorIOS initialRoute={{ title: 'React Native' }} />
</TabBarIOS.Item>
</TabBarIOS>
);
},
});

触摸事件处理：

var React = require('react-native');
var { ScrollView, TouchableHighlight, Text } = React;

var TouchDemo = React.createClass({
render: function() {
return (
<ScrollView>
<TouchableHighlight onPress={() => console.log('pressed')}>
<Text>Proper Touch Handling</Text>
</TouchableHighlight>
</ScrollView>
);
},
});

布局：

var React = require('react-native');
var { Image, StyleSheet, Text, View } = React;

扩展：

// Objective-C

#import "RCTBridgeModule.h"

@interface MyCustomModule : NSObject <RCTBridgeModule>
@end

@implementation MyCustomModule
– (void)processString:(NSString *)input callback:(RCTResponseSenderBlock)callback
{
RCT_EXPORT(); // available as NativeModules.MyCustomModule.processString
callback(@[[input stringByReplacingOccurrencesOfString:@"Goodbye" withString:@"Hello"];]]);
}
@end
// JavaScript

var React = require('react-native');
var { NativeModules, Text } = React;