React Native

React Native

React Native 使你能够运用 JavaScript 和 React 的相关知识，基于本地平台构建世界级的应用。 React Native 关注的焦点是开发者能够高效地开发所有相关平台的应用
- 学习一样东西就可以做任何事情。 Facebook 把 React Native 运用于大量的生产应用，并且将会继续向 React Native 投入人力财力。

本地
iOS 组件

在基于 React Native 的开发中，你可以使用标准的平台组件，比如 iOS 上的

UITabBar

和

UINavigationController

。这使你应用的界面看起来风格没有改变，不用考虑其它平台系统是怎么样的，保证了应用的高质量。这些组件可以通过使用它们对应的
React 组件简单地集成到你的应用中，比如 TabBarIOS 和 NavigatorIOS 。

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>
);
},
});

异步执行

所有 JavaScript 应用代码和本地平台代码之间的操作都是异步的，本地模块也可以使用另外的线程。这意味着可以在非主线程中解码图片，在后台保存到磁盘，计量文本和计算布局而不阻塞 UI ，等等。最后， React Native 应用是自然流动的和响应式的。本地代码和 JavaScript 代码的交互是完全格式化的，这就使得我们能够利用谷歌开发者工具在整个应用运行的时候来调试 JavaScript 代码，不论是在模拟器中还是物理设备中。

触摸处理

iOS 有一个非常强大的系统叫做响应链（ Responder Chain ），用于处理复杂的视图层级结构中的触摸操作，在 web 中没有对应的东西。 React Native 实现了一个类似的响应系统，提供了高层次的组件，比如 TouchableHighlight 正确集成滚动控件和其它一些元素而不需要任何额外的配置。

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>
);
},
});

弹性盒子和样式

视图布局应该是简单的，这就是为什么我们从 web 引入了弹性盒子布局到 React Native。弹性盒子使构建大多数常规的 UI 布局变得简单，比如带有外边距和内边距的框的并排放置和嵌套。 React Native 也支持常见的 web 样式，比如

fontWeight

；还支持

StyleSheet

抽象，这种抽象机制使得你可以在组件附近声明所有的样式和布局，然后在行内使用声明的样式（通过
style 属性），这样代码就比较优化了。

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

var ReactNative = React.createClass({
render: function() {
return (
<View style={styles.row}>
<Image
source={{uri: 'http://facebook.github.io/react/img/logo_og.png'}}
style={styles.image}
/>
<View style={styles.text}>
<Text style={styles.title}>
React Native
</Text>
<Text style={styles.subtitle}>
Build high quality mobile apps using React
</Text>
</View>
</View>
);
},
});
var styles = StyleSheet.create({
row: { flexDirection: 'row', margin: 40 },
image: { width: 40, height: 40, marginRight: 10 },
text: { flex: 1, justifyContent: 'center'},
title: { fontSize: 11, fontWeight: 'bold' },
subtitle: { fontSize: 10 },
});

Polyfills

React Native 专注于改变视图层代码书写的方式。其它的代码，我们参照 web 的通用标准，然后在合适的地方实现那些 API 。你可以使用 npm 来安装 JavaScript 库，这些库在 React Native 的基础上实现一些功能，比如

XMLHttpRequest

，

window.requestAnimationFrame

，

navigator.geolocation

。我们正在逐步扩展这些有用的
API ，并且也很高兴开源社区能贡献代码。

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

var GeoInfo = React.createClass({
getInitialState: function() {
return { position: 'unknown' };
},
componentDidMount: function() {
navigator.geolocation.getCurrentPosition(
(position) => this.setState({position}),
(error) => console.error(error)
);
},
render: function() {
return (
<Text>
Position: {JSON.stringify(this.state.position)}
</Text>
);
},
});

扩展性（
Extensibility ）

使用 React Native ，在不写一行本地代码的前提下创建一个伟大的 app 是很有可能的，但是 React Native 也可以通过自定义的本地视图和模块来轻松扩展 - 这意味着你可以重用已经创建好的任何东西，也能够引入和使用你最喜欢的本地库。为了在 iOS 中创建一个简单的模块，先创建一个实现

RCTBridgeModule

协议的新类，在

RCT_EXPORT_METHOD

中包装你想导出到
JavaScript 中的函数。另外，类本身必须用

RCT_EXPORT_MODULE()

显示导出。

// Objective-C

#import "RCTBridgeModule.h"

@interface MyCustomModule : NSObject <RCTBridgeModule>
@end

@implementation MyCustomModule

RCT_EXPORT_MODULE();

// Available as NativeModules.MyCustomModule.processString
RCT_EXPORT_METHOD(processString:(NSString *)input callback:(RCTResponseSenderBlock)callback)
{
callback(@[[input stringByReplacingOccurrencesOfString:@"Goodbye" withString:@"Hello"]]);
}

@end

// JavaScript

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

var Message = React.createClass({
render: function() {
getInitialState() {
return { text: 'Goodbye World.' };
},
componentDidMount() {
NativeModules.MyCustomModule.processString(this.state.text, (text) => {
this.setState({text});
});
},
return (
<Text>{this.state.text}</Text>
);
},
});

自定义 iOS 视图可以通过继承

RCTViewManager

来导出，实现一个

-view

方法，通过

RCT_EXPORT_VIEW_PROPERTY

宏导出属性。然后在你的应用的
JavaScript 代码中通过

requireNativeComponent

来使用这个组件。

// Objective-C

#import "RCTViewManager.h"

@interface MyCustomViewManager : RCTViewManager
@end

@implementation MyCustomViewManager

- (UIView *)view
{
return [[MyCustomView alloc] init];
}

RCT_EXPORT_VIEW_PROPERTY(myCustomProperty, NSString);

@end`}

// JavaScript

var React = require('react-native');
var { requireNativeComponent } = React;

class MyCustomView extends React.Component {
render() {
return <NativeMyCustomView {...this.props} />;
}
}
MyCustomView.propTypes = {
myCustomProperty: React.PropTypes.oneOf(['a', 'b']),
};

var NativeMyCustomView = requireNativeComponent('MyCustomView', MyCustomView);
module.exports = MyCustomView;

运行例子

git clone https://github.com/facebook/react-native.git[/code] 
cd react-native && npm install

cd Examples


现在，可以在 Xcode 中打开任何示例并运行。

更多更深入的文档内容，教程，请参看 React Native website 。

文档目录
快速开始

入门
教程
视频

指南

样式
手势响应系统（ Gesture Responder System
）
本地模块（ iOS ）
链接已有库
调试
测试
在真实设备上运行
与已有 App 集成
JavaScript 环境

引用唐巧的介绍:

今天早上起床看了react.js的介绍。facebook打算用它来统一移动端的编程语言，reac.js把界面全部用native控件实现，js只作为后端逻辑层。如果这个框架成功，将改变整个业界的移动开发效率，因为iOS和android代码可以大部分复用


UI 排版的问题
我自己一直不喜欢苹果新推出的 AutoLayout 那套解决方案，其实 HTML 和 CSS 在界面布局和呈现上深耕多年，Android 也是借鉴的 HTML 的那套方案，苹果完全可以也走这套方案的。但是苹果选择发明了一个 Constraint 的东西来实现排版。在企业的开发中，其实大家很少使用 Xib 的，而手写 Constraint 其实是非常痛苦的。所以出现了 Masonry 一类的开源框架来解决这类同行的痛苦。

我一直在寻找使用类似 HTML + CSS 的排版，但是使用原生控件渲染的框架。其实之前 BeeFramework 就做了这方面的事情。所以我还专门代表
InfoQ 对他进行过采访。BeeFramework 虽然开源多年，而且有 2000 多的 star 数，但是受限于它自身的影响力以及框架的复杂性，一直没有很大的成功。至少我不知道有什么大的公司采用。

这次 Facebook 的 React Native 做的事情相比 BeeFramework 更加激进。它不但采用了类似
HTML + CSS 的排版，还把语言也换成了 JavaScript，这下子改变可以称作巨大了。但是 Facebook 有它作为全球互联网企业的光环，相信会有不少开发者跟进采用 React Native。
不管怎么样，这确确实实是一个移动互联网的时代，我相信随着几年的发展，移动互联网的开发生态也会积累出越来越多宝贵的框架，以支撑出更加伟大的 App 出现。作为一个移动开发者，我很高兴能够成为这个时代的主角，用移动开发技术改变人们的生活。