前言

Facebook 在 React.js Conf 2015 大会上推出了基于 JavaScript 的开源框架 React Native，本中文教程翻译自 React Native 官方文档。

React Native 结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件，代替 DOM 元素来渲染等。

React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook 在多个应用程序产品中使用了 React Native，并将继续为 React Native 投资。

React Native for Android

Facebook 于 2015 年 9 月 15 日发布了 React Native for Android， 把 Web 和原生平台的 JavaScript 开发技术扩展到了 Google 的流行移动平台--Android。

新增 Android 相关章节:

• 入门
• 安装 Android 运行环境
• 教程
• 辅助功能
• Native 模块(Android)
• Native UI 组件(Android)
• 调试
• 在设备上运行(Android)
• 已知 Issues
• DrawerLayoutAndroid
• 图像
• ProgressBarAndroid
• SwitchAndroid
• ToolbarAndroid
• BackAndroid
• ToastAndroid

React Native 官网：http://facebook.github.io/react-native/

1

官网首页

React Native 官网首页介绍

React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook 在多个应用程序产品中使用了 React Native，并将继续为 React Native 投资。

React Native 入门

原生的 iOS 组件

有了 ReactNative，你可使用标准平台组件，比如 iOS 平台上的 UITabBar 和 UINavigationController。这可以让你的应用程序拥有和原生平台一致的外观和体验，并保持较高的品质。使用相应的 React 组件，如 iOS 标签栏和 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>
);
},
});

异步执行

JavaScript 应用代码和原生平台之间所有的操作都是异步执行，并且原生模块也可以使用额外线程。这意味着我们可以解码主线程图像，并将其在后台保存至磁盘，在不阻塞 UI 的情况下进行文本和布局的估量计算，等等。因此，React Native 应用程序的流畅度和响应性都非常好。通信也是完全可序列化的，当运行完整的应用程序时，这允许我们使用 Chrome Developer Tools 来调试 JavaScript，或者在模拟器中，或者在真机上。

见 调试

图片 1.1 chrome-breakpoint

触摸处理

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 抽象，它们提供了一种优化机制来宣称你所有的样式和布局在组件中的应用是正确的，且组件把它们应用到了内网中。

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 的重点是改变视图代码编写的方式。接下来，我们注意网络中普遍的并把那些 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>
);
},
});

可扩展性

使用 React Native 无需编写一行原生代码即可创建出一款不错的应用程序，并且 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，实现 -(UIView *)view 方法并用 RCT_EXPORT_VIEW_PROPERTY 宏导出属性的办法来公开。然后一个简单的 JavaScript 文件会连接这些点。

// Objective-C
#import "RCTViewManager.h"
@interface MyCustomViewManager : RCTViewManager
@end
@implementation MyCustomViewManager
- (UIView *)view
{
return [[MyCustomView alloc] init];
}
RCT_EXPORT_VIEW_PROPERTY(myCustomProperty);
@end
// JavaScript
module.exports = createReactIOSNativeComponentClass({
validAttributes: { myCustomProperty: true },
uiViewClassName: 'MyCustomView',
});

React Native 入门

2

快速入门

入门

要求

1. OS X - 当前仅支持 OS X
2. 推荐使用 Homebrew 的方式来安装 nvm，watchman 和 flow。
3. 安装 Node.js 4.0 或者更新的版本。
   • 使用 Homebrew 来安装 nvm 或者参考 它的安装指南。接着运行 nvm install node && nvm alias default node
     , 它可以让您安装最新版本的 Node.js 并设置您的终端，所以你可以通过键入 node
     来运行它。使用 Nvm 可以让您安装多个版本的 Node.js 并且在它们之间轻松切换。
   • npm 的更新之处。
4. brew 安装 watchman
   。我们推荐您安装 watchman, 否则您可能在点击一个节点文件的时候出现错误。
5. brew 安装 flow
   。如果您想使用 flow.

我们建议定期运行 brew update && brew upgrade
来使您的应用程序保持最新状态。

安装 iOS

我们需要 Xcode 6.3 或者更高的版本。 您可以在 App 应用商店里面安装它。

安装 Android

如果想要编写 React Native 安卓应用程序， 您需要安装安卓 SDK （如果您不想在真机上运行您的应用程序，那么您还需要一个安卓模拟器）。请参阅安卓安装指南 说明来配置你的安卓环境 。

快速开始

$ npm install -g react-native-cli
$ react-native init AwesomeProject
$ cd AwesomeProject/

运行 iOS 应用程序：

• 在 Xcode 中打开 ios/AwesomeProject.xcodeproj
  并且点击运行。
• 在选定的文本编辑器中打开 index.ios.js
  并且编辑代码。
• 点击 iOS 模拟器中的 ⌘-R 来重新加载应用程序并且观察发生的变化！

运行 Android 应用程序：

• $ react-native run-android
  
• 在选定的文本编辑器中打开 index.android.js
  并且编辑代码。
• 按下菜单按钮 （默认情况下是 F2，或在 Genymotion 中点击 ⌘ M），然后选择 * Reload JS * 看看发生了什么变化！
• 在一个终端中运行 adb logcat *:S ReactNative:V ReactNativeJS:V
  来查看您的应用程序日志。

祝贺你！你已经成功运行并修改了你的第一个 React Native 应用程序。

_如果您在开始的时候遇到任何问题，请参阅 故障诊断页面

让安卓支持现有的 React Native 项目

如果您现在已经拥有一个(iOS) React Native 项目并且想让安卓也支持它, 那么您需要在您现有的项目目录中执行以下命令：

1.将您 package.json
文件中的 react-native
目录更新到最新的版本 2. $ npm install
3. $ react-native android

安装 Android 运行环境

本指南描述了在安卓模拟器上运行 React Native 安卓应用程序所需要的开发环境的基本安装步骤。在这里我们不讨论诸如 IDE 的开发工具配置。

这些指南只包含了从头开始安装的过程。如果你恰好有一些旧的、 过时的 Android SDK 版本，请务必把所需的包更新至下面提到的版本并安装所有缺少的部分。

安装和配置 SDK

1. 安装最新的 JDK.
2. 使用 brew install android-sdk
   来安装安卓 SDK。
3. 将它添加到 ~/.bashrc
   , ~/.zshrc
   或者任何其他您的 shell 所使用的路径： export ANDROID_HOME=/usr/local/opt/android-sdk
4. 启动一个新的 shell 并且运行 android
   ；在出现窗口中请检查：
   • Android SDK 生成工具版本 23.0.1
   • Android 6.0 (API 23)
   • Android Support Repository
5. 点击 "Install Packages".

安装和运行 Android 原生模拟器

1. 启动一个新的 shell 并且运行 android
   ;在出现窗口中请检查：
   1. Intel x86 原生系统映像 （支持 Android 5.1.1 - API 22）
   2. Intel x86 仿真器加速器 （HAXM 安装）

图片 2.1 SDK 管理器窗口

图片 2.2 SDK 管理器窗口

1. 点击 "Install Packages".
2. 配置 HAXM.
3. 使用安卓模拟器创建一个 Android 的虚拟设备 (AVD)：
   1. 运行 android avd
      并且点击 Create...

图片 2.3 创建 AVD 对话框

• 1. 选定该新的 AVD, 并且点击 Start...
     

教程

序言

这篇教程旨在让你使用 React Native 快速的开发 iOS 和 Android 应用。如果你会想什么是 React Native 并且为什么 Facebook 构建了它，这篇 文章 解释了为什么。

我们期望你有使用 React 来写应用的经验。如果没有，你可以在 React website 学到。

安装

React Native 需要一些在 开始 React Native 中阐明的基本的安装。

在完成了这些依赖项的安装之后，这里有两条可以为一个 React Native 项目完全准备好的命令。

1. npm install -g react-native-cli
   

react-native-cli 是完成剩余安装的命令行工具。它是通过 npm 安装的。这将会在你的终端里面安装 react-native
这个命令行，你只需要做一次即可。

1. react-native init AwesomeProject
   

这一条命令获取 React Native 的源代码和依赖包，然后在 AwesomeProject/iOS/AwesomeProject.xcodeproj
创建一个新的 Xcode 项目，并且在 AwesomeProject/android/app
下面创建一个 gradle 项目。

开发

在 iOS 端，现在你可以在 Xcode 里面打开这个新项目 (AwesomeProject/AwesomeProject.xcodeproj
)，然后使用 ⌘+R
来简单的构建和运行这个项目。这样做也会开启允许代码实时渲染的 Node 服务器。有了它你可以通过在模拟器里面按住 ⌘+R
来看你的更改，而不用在 Xcode 里面重新编译。

在 Android 端，在 AwesomeProject
里面运行 react-native run-android
来在你的模拟器设备上面安装生成的应用，并且开启允许代码实时渲染的 Node 服务器。为了看到你的更改你必须打开震动菜单（摇动你的设备或者按住设备上面的菜单按钮，在模拟器上面按住 F2 或者 Page Up，在 Genymotion 上面按住 ⌘+M），然后点击 Reload JS
。

在这篇教程里面我们会开发一个简单版本的电影应用，该应用可以获取电影院里面的 25 部电影，并且将它们显示在 ListView 里面。

Hello World

react-native init
将会生成和你的工程名字一样的应用，在这个例子中就是 AwesomeProject。这是一个简单的 hello world 应用。在 iOS 上面你可以编辑 index.ios.js
来给这个应用做一些改变，然后在模拟器里面按住 ⌘+R 来看发生的改变。在 Android 上面可以编辑 index.android.js
来给你的应用做一些改变，并且按住震动菜单上面的 Reload JS
来看发生的改变。

伪造数据

在我们书写代码来获取真正的 Rotten Tomatoes 数据之前，我们可以伪造一些数据开始使用 React Native。在 Facebook 我们经常会在 JS 文件的头部申明常量，就在 requires 下面，但是你想增加什么数据就增加什么数据。在 index.ios.js
或者 index.android.js
里面：

var
MOCKED_MOVIES_DATA
=

[


{
title
:

'Title'
,
year
:

'2015'
,
posters
:

{
thumbnail
:

'http://i.imgur.com/UePbdph.jpg'
}
}
,

]
;

渲染一部电影

我们将要给这部电影渲染标题，年份，缩略图。因为缩略图在 React Native 里面是一个图片组件，在下面的 React requires 里面增加 Image。

var

{

AppRegistry
,

Image
,

StyleSheet
,

Text
,

View
,

}

=
React
;

现在我们改变这个渲染函数，因此我们可以渲染上面提到的数据，而不是 hello world。

render
:

function
(
)

{


var
movie
=
MOCKED_MOVIES_DATA
[
0
]
;


return

(


<
View style
=
{
styles.
container
}
>


<
Text
>
{
movie.
title
}
</
Text
>


<
Text
>
{
movie.
year
}
</
Text
>


<
Image source
=
{
{
uri
:
movie.
posters
.
thumbnail
}
}

/>


</
View
>


)
;


}

按住 ⌘+R
/ Reload JS
然后你就会看到在 "2015" 上面的 "Title" 。注意 Image 并不会渲染任何东西。这是因为我们没有给我们想要渲染的图片增加宽度和高度。这将会由样式来完成。让我们在改变样式的时候我们可以清除一些我们不再使用的样式。

var
styles
=
StyleSheet.
create
(
{

container
:

{

flex
:

1
,

justifyContent
:

'center'
,

alignItems
:

'center'
,

backgroundColor
:

'#F5FCFF'
,


}
,

thumbnail
:

{

width
:

53
,

height
:

81
,


}
,

}
)
;

最后我们需要将这个样式应用到这个图片组件上面：

<
Image
source
=
{
{
uri
:
movie.
posters
.
thumbnail
}
}

style
=
{
styles.
thumbnail
}


/>

按住 ⌘+R
/ Reload JS
现在这个图片就会渲染了。

增加一些样式

太棒了，我们已经渲染了我们的数据。现在让我们让它看起来更美观一点。我将会将文字放在图片的右边，并且让标题更大，然后在区域里面居中。

+---------------------------------+
|+-------++----------------------+|
|| || Title ||
|| Image || ||
|| || Year ||
|+-------++----------------------+|
+---------------------------------+

我们需要增加另外一个容器来垂直的展开在水平方向上面展开的组件。

return

(


<
View style
=
{
styles.
container
}
>


<
Image
source
=
{
{
uri
:
movie.
posters
.
thumbnail
}
}

style
=
{
styles.
thumbnail
}


/>


<
View style
=
{
styles.
rightContainer
}
>


<
Text style
=
{
styles.
title
}
>
{
movie.
title
}
</
Text
>


<
Text style
=
{
styles.
year
}
>
{
movie.
year
}
</
Text
>


</
View
>


</
View
>


)
;

没有改变很多，我们在文本外面增加了一个容器，然后将它们移动到图片后面（因为它们在图片右边）。现在让我们看看样式都改变了什么：

container
:

{

flex
:

1
,

flexDirection
:

'row'
,

justifyContent
:

'center'
,

alignItems
:

'center'
,

backgroundColor
:

'#F5FCFF'
,


}
,

我们使用 FlexBox 来布局－可以看看 这篇文章 来了解更多。

在上面的代码片段里面，我们简单的增加了 flexDirection: 'row'
，这将会让在主容器里面的孩子节点水平的展开而不是垂直展开。

现在我们给这个 JS 的 style
对象增加另外一个样式：

rightContainer
:

{

flex
:

1
,


}
,

这意味着这个 rightContainer
在没有被图片占据的父容器里面占据了剩余的空间。如果这不起作用的话，给 rightContainer
增加一个 backgroundColor
并且尝试着移除flex: 1
。你将会看到这将会导致父容器的大小将会变为能够容纳孩子视图的最小大小。

给文本加上样式就很直接了：

title
:

{

fontSize
:

20
,

marginBottom
:

8
,

textAlign
:

'center'
,


}
,

year
:

{

textAlign
:

'center'
,


}
,

然后按住 ⌘+R
/ Reload JS
你就会看到更新后的视图了。

获取真实数据

从 Rotten Tomatoes 的 API获取数据并不和学习 React Native 有任何关系，因此继续学习下去吧。

在这个文件的顶部增加下面的一些常量（通常在 requires 下面）来创建获取数据的 REQUEST_URL。

/**
* For quota reasons we replaced the Rotten Tomatoes' API with a sample data of
* their very own API that lives in React Native's Github repo.
*/

var
REQUEST_URL
=

'https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json'
;

给我们的应用增加一些初始化的状态，因此我们可以检查 this.state.movies === null
来看电影数据是否被加载。当带有 this.setState({movies: moviesData})
响应返回的时候我们可以设置数据。就在我们的 React 类里面的渲染函数上面增加这段代码：

getInitialState
:

function
(
)

{


return

{

movies
:

null
,


}
;


}
,

我们想在组件完成加载的时候关闭请求。 在组件被加载之后，componentDidMount
是 React 组件里面只会调用一次的函数。

componentDidMount
:

function
(
)

{


this
.
fetchData
(
)
;


}
,

现在给我们的主组件增加上面是用到的 fetchData
。这个方法将会负责处理数据的获取。你需要做的就是在解决预期的问题之后调用 this.setState({movies: data})
函数。因为 React 的工作方式是：setState
会触发一个从新渲染，之后渲染函数就会注意到 this.state.movies
不再为 null
。注意我们在最后调用 done()
－请总是确保调用 done()
否则任何抛出的错误信息都会被隐藏。

fetchData
:

function
(
)

{

fetch
(
REQUEST_URL
)

.
then
(
(
response
)

=>
response.
json
(
)
)

.
then
(
(
responseData
)

=>

{


this
.
setState
(
{

movies
:
responseData.
movies
,


}
)
;


}
)

.
done
(
)
;


}
,

现在修改这个渲染函数来渲染一个加载的视图，如果我们没有任何电影数据，否则选择第一部电影。

render
:

function
(
)

{


if

(
!
this
.
state
.
movies
)

{


return

this
.
renderLoadingView
(
)
;


}

 

var
movie
=

this
.
state
.
movies
[
0
]
;


return

this
.
renderMovie
(
movie
)
;


}
,

 
renderLoadingView
:

function
(
)

{


return

(


<
View style
=
{
styles.
container
}
>


<
Text
>

Loading movies...

</
Text
>


</
View
>


)
;


}
,

 
renderMovie
:

function
(
movie
)

{


return

(


<
View style
=
{
styles.
container
}
>


<
Image
source
=
{
{
uri
:
movie.
posters
.
thumbnail
}
}

style
=
{
styles.
thumbnail
}


/>


<
View style
=
{
styles.
rightContainer
}
>


<
Text style
=
{
styles.
title
}
>
{
movie.
title
}
</
Text
>


<
Text style
=
{
styles.
year
}
>
{
movie.
year
}
</
Text
>


</
View
>


</
View
>


)
;


}
,

现在按住 ⌘+R
/ Reload JS
然后直到响应返回的时候你会看到 "Loading movies..." ，之后它就会渲染从 Rotten Tomatoes 获取到的第一部电影。

ListView

现在让我们来修改这个应用来在一个 ListView
组件里面渲染所有的数据，而不是只是渲染第一部电影。

为什么一个 ListView
比只渲染所有的元素或者将它们放到一个 ScrollView
要好一些？尽管 React 很快，但是渲染一个不确定列表的元素可能就会慢。ListView
渲染视图，因此你只在屏幕上显示要显示的视图，那些已经渲染过但是不在屏幕上显示的就会被从原生视图层移除。

第一件事就是快：在这个文件顶部增加 ListView
必须项。

var

{

AppRegistry
,

Image
,

ListView
,

StyleSheet
,

Text
,

View
,

}

=
React
;

现在修改渲染函数，因此一旦我们获取到了数据，它就会渲染一个列表的电影而不只是一部电影。

render
:

function
(
)

{


if

(
!
this
.
state
.
loaded
)

{


return

this
.
renderLoadingView
(
)
;


}

 

return

(


<
ListView
dataSource
=
{
this
.
state
.
dataSource
}

renderRow
=
{
this
.
renderMovie
}

style
=
{
styles.
listView
}


/>


)
;


}
,

这个 DataSource
是一个被 ListView
用来决定在更新的过程中哪一行被改变了的接口。

你会注意到我们从 this.state
来使用 dataSource
。下一步就是给由 getInitialState
返回的对象增加一个空的dataSource
。既然我们在 dataSource
里面存放数据，我们不应该在此使用 this.state.movies
来保存数据两次。我们可以使用状态 (this.state.loaded
) 的布尔属性来判断获取数据是否完成。

getInitialState
:

function
(
)

{


return

{

dataSource
:

new
ListView.
DataSource
(
{

rowHasChanged
:

(
row1
,
row2
)

=>
row1
!==
row2
,


}
)
,

loaded
:

false
,


}
;


}
,

这里是更具状态更新的修改之后的 fetchData
：

fetchData
:

function
(
)

{

fetch
(
REQUEST_URL
)

.
then
(
(
response
)

=>
response.
json
(
)
)

.
then
(
(
responseData
)

=>

{


this
.
setState
(
{

dataSource
:

this
.
state
.
dataSource
.
cloneWithRows
(
responseData.
movies
)
,

loaded
:

true
,


}
)
;


}
)

.
done
(
)
;


}
,

最后我们给 ListView
组件的 styles
JS 对象增加样式：

listView
:

{

paddingTop
:

20
,

backgroundColor
:

'#F5FCFF'
,


}
,

现在这是最终结果：

这里仍然有一些工作要做来让它称为一个功能完全的应用，比如：增加导航栏，搜索框，下拉刷新加载等。在 Movies Example 来看全部的功能。

最终源代码

/**
* Sample React Native App
* https://github.com/facebook/react-native
*/

'use strict'
;

 
var
React
=
require
(
'react-native'
)
;

var

{

AppRegistry
,

Image
,

ListView
,

StyleSheet
,

Text
,

View
,

}

=
React
;

 
var
API_KEY
=

'7waqfqbprs7pajbz28mqf6vz'
;

var
API_URL
=

'http://api.rottentomatoes.com/api/public/v1.0/lists/movies/in_theaters.json'
;

var
PAGE_SIZE
=

25
;

var
PARAMS
=

'?apikey='

+
API_KEY
+

'&page_limit='

+
PAGE_SIZE
;

var
REQUEST_URL
=
API_URL
+
PARAMS
;

 
var
AwesomeProject
=
React.
createClass
(
{

getInitialState
:

function
(
)

{


return

{

dataSource
:

new
ListView.
DataSource
(
{

rowHasChanged
:

(
row1
,
row2
)

=>
row1
!==
row2
,


}
)
,

loaded
:

false
,


}
;


}
,

 
componentDidMount
:

function
(
)

{


this
.
fetchData
(
)
;


}
,

 
fetchData
:

function
(
)

{

fetch
(
REQUEST_URL
)

.
then
(
(
response
)

=>
response.
json
(
)
)

.
then
(
(
responseData
)

=>

{


this
.
setState
(
{

dataSource
:

this
.
state
.
dataSource
.
cloneWithRows
(
responseData.
movies
)
,

loaded
:

true
,


}
)
;


}
)

.
done
(
)
;


}
,

 
render
:

function
(
)

{


if

(
!
this
.
state
.
loaded
)

{


return

this
.
renderLoadingView
(
)
;


}

 

return

(


<
ListView
dataSource
=
{
this
.
state
.
dataSource
}

renderRow
=
{
this
.
renderMovie
}

style
=
{
styles.
listView
}


/>


)
;


}
,

 
renderLoadingView
:

function
(
)

{


return

(


<
View style
=
{
styles.
container
}
>


<
Text
>

Loading movies...

</
Text
>


</
View
>


)
;


}
,

 
renderMovie
:

function
(
movie
)

{


return

(


<
View style
=
{
styles.
container
}
>


<
Image
source
=
{
{
uri
:
movie.
posters
.
thumbnail
}
}

style
=
{
styles.
thumbnail
}


/>


<
View style
=
{
styles.
rightContainer
}
>


<
Text style
=
{
styles.
title
}
>
{
movie.
title
}
</
Text
>


<
Text style
=
{
styles.
year
}
>
{
movie.
year
}
</
Text
>


</
View
>


</
View
>


)
;


}
,

}
)
;

 
var
styles
=
StyleSheet.
create
(
{

container
:

{

flex
:

1
,

flexDirection
:

'row'
,

justifyContent
:

'center'
,

alignItems
:

'center'
,

backgroundColor
:

'#F5FCFF'
,


}
,

rightContainer
:

{

flex
:

1
,


}
,

title
:

{

fontSize
:

20
,

marginBottom
:

8
,

textAlign
:

'center'
,


}
,

year
:

{

textAlign
:

'center'
,


}
,

thumbnail
:

{

width
:

53
,

height
:

81
,


}
,

listView
:

{

paddingTop
:

20
,

backgroundColor
:

'#F5FCFF'
,


}
,

}
)
;

 
AppRegistry.
registerComponent
(
'AwesomeProject'
,

(
)

=>
AwesomeProject
)
;

3

指南

样式

React Native 不实现 CSS，而是依赖于 JavaScript 来为你的应用程序设置样式。这是一个有争议的决定，你可以阅读那些幻灯片，了解背后的基本原理。

声明样式

在 React Native 中声明样式的方法如下：

var styles = StyleSheet.create({
base: {
width: 38,
height: 38,
},
background: {
backgroundColor: '#222222',
},
active: {
borderWidth: 2,
borderColor: '#00ff00',
},
});

StyleSheet.create
的创建是可选的，但提供了一些关键优势。它通过将它们转换为引用一个内部表的纯数字，来确保值是不可变的和不透明的。通过将它放在文件的最后，也确保了它们为应用程序只创建一次，而不是每一个 render 都创建。

所有的属性名称和值是工作在网络中的一个子集。对于布局来说，React Native实现了 Flexbox。

使用样式

所有的核心组件接受样式属性。

<Text style={styles.base} />
<View style={styles.background} />

它们也接受一系列的样式。

<View style={[styles.base, styles.background]} />

行为与 Object.assign
相同：在冲突值的情况下，从最右边元素的值将会优先，并且 falsy 值如 false
，undefined
和 null
将被忽略。一个常见的模式是基于某些条件有条件地添加一个样式。

<View style={[styles.base, this.state.active && styles.active]} />

最后，如果真的需要，您还可以在render中创建样式对象，但是这种做法非常不赞成。最后把它们放在数组定义中。

<View
style={[styles.base, {
width: this.state.width,
height: this.state.width * this.state.aspectRatio
}]}
/>

样式传递

为了让一个 call site 定制你的子组件的样式，你可以通过样式传递。使用 View.propTypes.style
和 Text.propTypes.style
，以确保只有样式被传递了。

var List = React.createClass({
propTypes: {
style: View.propTypes.style,
elementStyle: View.propTypes.style,
},
render: function() {
return (
<View style={this.props.style}>
{elements.map((element) =>
<View style={[styles.element, this.props.elementStyle]} />
)}
</View>
);
}
});
// ... in another file ...
<List style={styles.list} elementStyle={styles.listElement} />

属性支持

你可以在以下的链接中检测最新的 CSS 属性支持。

• View 属性
• Image 属性
• Text 属性
• Flex 属性

手势应答系统

手势识别在移动设备上比在网络上要复杂得多。当应用程序确定用户的意图时，一个触摸可能要经历几个阶段。例如，应用程序需要确定触摸是否是滚动，滑动部件还是轻击。这甚至可以在触摸期间发生改变，也可以有多个同时触摸。

要想使组件在没有任何额外的关于它们的父组件或子组件的知识的情况下处理这些触摸交互，需要触摸应答系统。这个系统在 ResponderEventPlugin.js
中实现了，其中包含更多细节和文档。

最佳实践

用户在 web 应用程序与本机的可用性上可以感觉到巨大的差异，并且这是最大的原因之一。每一个动作都应该有以下属性：

• 反馈/高亮——显示给用户是什么正在处理他们的触摸，以及当他们释放手势时，会发生什么
• 撤销的能力——当做一个动作时，用户应该能够在触摸过程中通过移动手指中止该动作。

这些特性让用户使用一个应用程序时更舒适，因为它允许人们在实验和交互时不用担心犯错误。

TouchableHighlight 和 Touchable*

应答系统在使用时可能是复杂的。所以我们为应该“可以轻击的”东西提供了一个抽象的 Touchable
实现。这使用了应答系统，并且使你以声明的方式可以轻松地识别轻击交互。在网络中任何你会用到按钮或链接的地方使用 TouchableHighlight
。

应答器生命周期

通过实施正确的处理方法，视图可以成为接触应答器。有两种方法来询问视图是否想成为应答器：

• View.props.onStartShouldSetResponder: (evt) => true,
  ——这个视图是否在触摸开始时想成为应答器？
• View.props.onMoveShouldSetResponder: (evt) => true,
  ——当视图不是应答器时，该指令被在视图上移动的触摸调用：这个视图想“声明”触摸响应吗?

如果视图返回 true 并且想成为应答器，那么下述的一种情况就会发生：

• View.props.onResponderGrant:(evt)= > { }
  ——视图现在正在响应触摸事件。这个时候要高亮标明并显示给用户正在发生的事情。
• View.props.onResponderReject:(evt)= > { }
  ——其他的东西时应答器并且不会释放它。

如果视图正在响应，那么可以调用以下处理程序：

• View.props.onResponderMove:(evt)= > { }
  ——用户正移动他们的手指
• View.props.onResponderRelease:(evt)= > { }
  ——在触摸最后被引发，即“touchUp”
• View.props.onResponderTerminationRequest:(evt)= >true
  ——其他的东西想成为应答器。这种视图应该释放应答吗？返回 true 就是允许释放
• View.props.onResponderTerminate:(evt)= > { }
  ——应答器已经从视图获取了。可能在调用 onResponderTerminationRequest
  之后被其他视图获取，也可能是被操作系统在没有请求的情况下获取了(发生在 iOS 的 control center/notification center)

evt
是一个综合的触摸事件，有以下形式：

• nativeEvent
  
  • changedTouches
    ——自从上个事件之后，所有发生改变的触摸事件的数组
  • identifier
    ——触摸的 ID
  • locationX
    ——触摸相对于元素的 X 位置
  • locationY
    ——触摸相对于元素的 Y 位置
  • pageX
    ——触摸相对于屏幕的 X 位置
  • pageY
    ——触摸相对于屏幕的 Y 位置
  • target
    ——接收触摸事件的元素的节点 id
  • timestamp
    ——触摸的时间标识符，用于速度计算
  • touches
    ——所有当前在屏幕上触摸的数组

捕捉 ShouldSet 处理程序

在冒泡模式，即最深的节点最先被调用，的情况下，onStartShouldSetResponder
和 onMoveShouldSetResponder
被调用。这意味着，当多个视图为 * ShouldSetResponder
处理程序返回 true 时，最深的组件会成为应答器。在大多数情况下，这是可取的，因为它确保了所有控件和按钮是可用的。

然而，有时父组件会想要确保它成为应答器。这可以通过使用捕获阶段进行处理。在应答系统从最深的组件冒泡时，它将进行一个捕获阶段，引发 * ShouldSetResponderCapture
。所以如果一个父视图要防止子视图在触摸开始时成为应答器，它应该有一个 onStartShouldSetResponderCapture
处理程序，返回 true。

• View.props.onStartShouldSetResponderCapture: (evt) => true,
  
• View.props.onMoveShouldSetResponderCapture: (evt) => true,
  

PanResponder

更高级的手势解释，看看 PanResponder。

辅助功能

iOS

在 iOS 系统上辅助功能涵盖许多话题，但对许多人来说辅助功能是 VoiceOver 的代名词，即 iOS 3.0 版本以后的一种技术。它充当屏幕阅读器的角色，允许有视觉障碍的人使用 iOS 设备。点击这里了解更多。

Android

对 Android 系统而言，辅助功能涉及到了许多不同的话题，其中之一是让丧失视力的人能够使用您的应用程序。对于现在的社会，谷歌提供了一个名叫 TalkBack 的内置屏幕读者服务机器人。使用该机器人，你可以使用触摸勘探和手势来使用移动设备和应用程序。TalkBack 可以使用文本语音转换器来阅读屏幕上的内容并且可以发出警报来通知用户有关于应用程序中的重要信息。点击这里来了解更多关于 Android 的辅助功能的特征以及点击这里来了解更多关于使您的本地应用程序的辅助功能。

创建辅助性应用程序

辅助功能的性质

辅助性（iOS, Android）

如果为 true
的情况，代表该视图是一个辅助功能元素。当视图是辅助功能元素时，它把它的子元素分组成一个单一的可选组件。默认情况下，可触摸的所有元素都具有辅助性。

在 Android 系统中，在 react-native 视图中 ' accessible={true}' 属性将被翻译成本地命令 ' focusable={true}'。

<
View
accessible
=
{
true
}
>


<
Text
>
text one
</
Text
>


<
Text
>
text two
</
Text
>

</
View
>

在上面的示例中，我们不能分别在 'text one' 和 'text two' 中获得辅助焦点。相反我们可以在父元素上使用 'accessible' 属性获得焦点。

accessibilityLabel (iOS, Android)

如果要将视图标记为具有辅助性，那么一个比较好的做法就是为这个视图设置一个 accessibilityLabel 标签以便使用 VoiceOver 的人知道他们选择了什么元素。当用户选择了一些元素，那么 VoiceOver 将会阅读响应的字符串文本。

若要使用它，在您的视图中将 accessibilityLabel
属性设置为一个自定义的字符串：

<
TouchableOpacity accessible
=
{
true
}
accessibilityLabel
=
{
'Tap me!'
}
onPress
=
{
this
._onPress
}
>


<
View
style
=
{
styles.
button
}
>


<
Text style
=
{
styles.
buttonText
}
>
Press me
!</
Text
>


</
View
>

</
TouchableOpacity
>

在上面的示例中，TouchableOpacity 元素中的 accessibilityLabel
会被默认的设置为 "点击我！"。 该标签是通过使用空格符来串联所有文本节点子元素构造的。

accessibilityTraits (iOS)

辅助功能特征告诉人们他们在使用 VoiceOver 的时候选择了什么元素。此元素是一个标签？一个按钮？还是标头？ accessibilityTraits
将会回答这些问题。

如果要使用它，请把 accessibilityTraits 属性设置为 accessibilityTraits 辅助功能字符串(或数组)之一：

• none 当元素没有特征的时候使用。
• button 当元素需要被当做一个按钮的时候使用。
• link 当元素需要被当做链接的时候使用。
• header 当元素作为内容部分的标题 (如导航栏中的标题) 的时候使用。
• search 当文本字段元素也被视为一个搜索字段的时候使用。
• image 当元素需要被作为图像，比如和按钮和链接结合的时候使用。
• selected 当该元素被选中时使用。例如，表中被选中的行或者分段控件中选中的按钮。
• plays 当元素被激活的并且播放自己的声音的时候使用。
• key 当元素充当键盘按键的时候使用。
• text 当元素应该被视为不能更改的静态文本的时候使用。
• summary 当在应用程序首次启动的时候，该元素可以提供应用程序的实时状况的摘要的时候使用。例如，当关于天气的应用程序首次启动的时候，带有当天天气信息的元素将被该特征所标记。
• disabled 当控件未启动并且对用户的输入无响应的时候使用。
• frequentUpdates 当元素经常更新其标签或者它的值，但是太平凡的发送通知的时候使用。允许辅助功能客户端轮询更改。秒表就是一个例子。
• startsMedia 当激活一个元素并开始一段媒体会话(例如播放电影，录制音频)不应该被辅助技术的输出所打断，比如 VoiceOver。
• adjustable 当元素可以被"调整"的时候使用(例如滑块)。
• allowsDirectInteraction 当元素允许 VoiceOver 用户直接进行触摸互动的时候使用(例如，表示一个钢琴键盘的视图)。
• pageTurn 当它完成阅读的元素的内容时候通知 VoiceOver 需要滚动到下一个页面。

onAccessibilityTap (iOS)

使用此属性来分配一个自定义的函数，当有人在一个可访问元素被选中的时候通过双击来激活它的时候来调用该函数。

onMagicTap (iOS)

当有人使用 “magic tap”手势，即：用两个手指双击的时候，该属性就会被分配给一个自定义函数，同时，这个函数会被调用。一个魔法敲击函数应该执行用户可以在组件中找到的最具有相关性的操作。在 iPhone 的手机应用程序中，一个魔法敲击可以接听或者结束一个电话。如果所选的元素不具有 onMagicTap
功能，该系统将遍历视图层次结构直到它找到一个拥有此功能的视图。

accessibilityComponentType (Android)

在某些情况下，我们也要提醒选定的组件类型的最终用户 (即，它是一个"按钮")。如果我们正在使用本机的按钮，那么它会自动工作。由于我们使用的是 javascript，所以我们需要为 TalkBack 提供更多的语境。为了达到这个目的，您必须为所有 UI 组件指定 'accessibilityComponentType' 属性。例如，我们支持 'button'，'radiobutton_checked' 和 'radiobutton_unchecked'等。

<
TouchableWithoutFeedback accessibilityComponentType
=
”button”
onPress
=
{
this
._onPress
}
>


<
View
style
=
{
styles.
button
}
>


<
Text style
=
{
styles.
buttonText
}
>
Press me
!</
Text
>


</
View
>

</
TouchableWithoutFeedback
>

在上面的示例中，TouchableWithoutFeedback 是被 TalkBack 作为一个本机按钮声明的。

accessibilityLiveRegion (Android)

当组件动态的更改时，我们希望 TalkBack 去提醒最终用户。'AccessibilityLiveRegion' 属性让这成为可能。它可以被设置为 ‘none’, ‘polite’ 以及 ‘assertive’。

• none 辅助功能服务不应该对此视图通知改变的地方。
• polite 辅助功能服务应该对此视图通知改变的地方。
• assertive 辅助功能服务应该中断正在进行的会话，并且以立即宣布该视图的改变。

<
TouchableWithoutFeedback onPress
=
{
this
._addOne
}
>


<
View
style
=
{
styles.
embedded
}
>


<
Text
>
Click me
</
Text
>


</
View
>

</
TouchableWithoutFeedback
>

<
Text accessibilityLiveRegion
=
"polite"
>

Clicked
{
this
.
state
.
count
}
times
</
Text
>

在上面的示例方法 _addOne 更改了 state.count 变量。当最终用户单击 TouchableWithoutFeedback 的时候，因为 TalkBack 的 'accessibilityLiveRegion=”polite”' 属性，所以它读取了文本视图中的文本。

importantForAccessibility (Android)

对于两个重叠的并且拥有相同父元素的 UI 组件，默认的辅助功能焦点可以有不可预知的行为。如果一个视图触发辅助事件并且它被汇报给了辅助功能服务器，那么 'ImportantForAccessibility' 属性将会通过控制解决它，它可以被设置为‘auto’, ‘yes’, ‘no’ 以及 ‘no-hide-descendants’ (最后一个值将迫使辅助功能服务忽略该组件和它的所有子元素)。

<
View
style
=
{
styles.
container
}
>


<
View
style
=
{
{
position
:

'absolute'
, left
:

10
, top
:

10
, right
:

10
, height
:

100
,
backgroundColor
:

'green'
}
}
importantForAccessibility
=
”yes”
>


<
Text
>
First layout
</
Text
>


</
View
>


<
View
style
=
{
{
position
:

'absolute'
, left
:

10
, top
:

10
, right
:

10
, height
:

100
,
backgroundColor
:

'yellow'
}
}
importantForAccessibility
=
”no
-
hide
-
descendant”
>


<
Text
>
Second layout
</
Text
>


</
View
>

</
View
>

在上面的示例中，对于 TalkBack 以及其他的辅助功能服务而言，黄色的布局及其后代是完全不可见的。所以我们可以容易的使用来自于同一个父元素并且不带有令人疑惑的 TalkBack 的视图。

发送辅助功能事件（Android）

有时候在 UI 组件中去触发一个辅助功能事件很有用 (即当一个自定义的视图在屏幕上显示或自定义单选按钮已被选中)。为了达到这个目的，本地 UIManager 模块公布了一个名叫 'sendAccessibilityEvent' 的方法。它拥有两个参数： 视图标签和一个类型的事件。

_onPress
:
function
(
)

{


this
.
state
.
radioButton

=

this
.
state
.
radioButton

===
“radiobutton_checked”
?

“radiobutton_unchecked”
:
“radiobutton_checked”
;


if

(
this
.
state
.
radioButton

===
“radiobutton_checked”
)

{

RCTUIManager.
sendAccessibilityEvent
(

React.
findNodeHandle
(
this
)
,
RCTUIManager.
AccessibilityEventTypes
.
typeViewClicked
)
;


}

}

 
<
CustomRadioButton
accessibleComponentType
=
{
this
.
state
.
radioButton
}

onPress
=
{
this
._onPress
}
/>

在上面的例子中，我们创建了一个如同本按钮的自定义单选按钮。更具体地说，TalkBack 可以正确的公布单选按钮选择的变化。

测试 VoiceOver 支持的内容（iOS）

如果要启用 VoiceOver，那么请在你的 iOS 设备上打开设置应用程序的位置。点击 General，然后点击 Accessibility。那里你会发现许多人们用来优化他们的设备的工具，比如粗体文本、 增加的对比度以及 VoiceOver。

如果要启用 VoiceOver，点击 "Vision" 下的 VoiceOver，打开显示在顶部的开关。

在辅助功能设置的最底部，还有一个"辅助功能的快捷方式"。你可以使用它三次单击主页按钮来触发 VoiceOver。

Native 模块(iOS)

有时一个应用程序需要访问平台 API，React Native 并没有相应的封装器。也许你想重用现有的一些 Objective——C 或 C++ 代码，无需在 JavaScript 上重新实现。或者写一些高性能，多线程的代码，如图像处理、网络堆栈，数据库或渲染。

我们设计 React Native，这样可以为你写真正的本地代码，并且能够访问整个平台。这是一个更高级的特性，且我们并不期望它成为通常开发过程的一部分，但是它的存在是至关重要的。如果 React Native 不支持你需要的本地特性，那么你应该能够自己构建它。

这是一个更高级的指南，展示了如何构建一个本地模块。它假设读者知道 Objective-C(Swift 还没有支持)和核心库(Foundation,UIKit)。

iOS 日历模块的例子

本指南将使用 iOS 日历 API 的例子。假设我们希望能够从 JavaScript 访问 iOS 日历。

Native 模块只是一个 Objectve-C 类，实现了 RCTBridgeModule
协议。如果你想知道，RCT 是 ReaCT 的一个简称。

// CalendarManager.h
#import "RCTBridgeModule.h"
#import "RCTLog.h"
@interface CalendarManager : NSObject <RCTBridgeModule>
@end

React Native 不会向 JavaScript 公开任何 CalendarManager
方法，除非有明确的要求。幸运的是有了 RCT_EXPORT
，这会非常简单：

// CalendarManager.m
@implementation CalendarManager
- (void)addEventWithName:(NSString *)name location:(NSString *)location
{
RCT_EXPORT();
RCTLogInfo(@"Pretending to create an event %@ at %@", name, location);
}
@end

现在从你的 JavaScript 文件中，你可以像这样调用方法：

var CalendarManager = require('NativeModules').CalendarManager;
CalendarManager.addEventWithName('Birthday Party', '4 Privet Drive, Surrey');

注意，导出的方法名称是从 Objective-C 选择器的第一部分中生成的。有时它会产生一个非惯用的 JavaScript 名称(就像在我们的例子中的那个)。你可以通过为 RCT_EXPORT
提供一个可选参数更改名字，如 RCT_EXPORT(addEvent)
。

方法返回的类型应该是 void
。React Native 桥是异步的,所以向 JavaScript 传递结果的唯一方法是使用回调或 emitting 事件(见下文)。

参数类型

React Native 支持多种参数类型，可以从 JavaScript 代码传递到 native 模块：

• 字符串型(NSString
  )
• 数字型(NSInteger
  ，float
  ,double
  ,CGFloat
  ,NSNumber
  )
• 布尔型(BOOL
  ,NSNumber
  )
• 这个列表中任何类型的数组(NSArray
  )
• 这个列表中任何类型的字符串键和值的映射(NSDictionary
  )
• 函数(RCTResponseSenderBlock
  )

在我们的 CalendarManager
示例中,如果我们想把事件日期传递到 native，我们必须将它转换成一个字符串或一个数字：

- (void)addEventWithName:(NSString *)name location:(NSString *)location date:(NSInteger)secondsSinceUnixEpoch
{
RCT_EXPORT(addEvent);
NSDate *date = [NSDate dateWithTimeIntervalSince1970:secondsSinceUnixEpoch];
}

随着 CalendarManager.addEvent
方法变得越来越复杂，参数的数量将会增加。其中一些可能是可选的。在这种情况下对改变 API 一点来接受事件属性的字典是值得考虑的，如：

#import "RCTConvert.h"
- (void)addEventWithName:(NSString *)name details:(NSDictionary *)details
{
RCT_EXPORT(addEvent);
NSString *location = [RCTConvert NSString:details[@"location"]]; // ensure location is a string
...
}

并且从 JavaScript 调用它：

CalendarManager.addEvent('Birthday Party', {
location: '4 Privet Drive, Surrey',
time: date.toTime(),
description: '...'
})

注意：关于数组和映射

React Ntive 没有为这些结构中值的类型提供任何担保。你的 native 模块可能期望一个字符串数组，但如果 JavaScript 调用你的包含数字和字符串数组的方法，你会得到带有 NSNumber
和 NSString
的 NSArray
。检查数组/映射值类型是开发人员的责任 (助手方法见 RCTConvert
)。

回调

警告

本节比其他更具有实验性，围绕回调我们没有得到一组最佳实践。

Native 模块还支持一种特殊的参数——回调。在大多数情况下它是用来向 JavaScript 提供函数调用结果的。

- (void)findEvents:(RCTResponseSenderBlock)callback
{
RCT_EXPORT();
NSArray *events = ...
callback(@[[NSNull null], events]);
}

RCTResponseSenderBlock
只接受一个参数——参数的数组传递给 JavaScript 的回调。在本例中，我们使用节点的惯例来为 error 和其他的——函数的结果设置第一个参数。

CalendarManager.findEvents((error, events) => {
if (error) {
console.error(error);
} else {
this.setState({events: events});
}
})

Native 模块应该只调用它的回调一次。然而，它可以将回调作为 ivar 存储并稍后调用回调。这种模式通常用于包装需要委托的 iOS 的 APIs。请看 RCTAlertManager
。

如果你想向 JavaScript 传递 error ——如对象，使用 RCTUtils.h
的 RCTMakeError
。

实现 native 模块

Native 模块应该没有任何关于什么线程正在被调用的假设。React Native 在一个单独的串行 GCD 队列中调用 native 模块方法，但这是一个实现细节，可能会改变。如果 native 模块需要调用 main-thread-only iOS API，它应该在主队列安排操作：

- (void)addEventWithName:(NSString *)name callback:(RCTResponseSenderBlock)callback
{
RCT_EXPORT(addEvent);
dispatch_async(dispatch_get_main_queue(), ^{
// Call iOS API on main thread
...
// You can invoke callback from any thread/queue
callback(@[...]);
});
}

同样的方法，如果操作要很长时间才能完成，native 模块不应该阻塞。使用 dispatch_async
在后台队列中安排耗费大的工作是一个好主意。

导出常量

Native 模块可以在运行时向 JavaScript 导出立即可用的常量。导出一些初始数据是有用的，否则这些初始数据需要往返的桥梁。

- (NSDictionary *)constantsToExport
{
return @{ @"firstDayOfTheWeek": @"Monday" };
}

JavaScript 能够立即使用这些值：

console.log(CalendarManager.firstDayOfTheWeek);

注意，只有在初始化时常量才能被导出，所以如果你在运行时改变了 constantsToExport
的值，它不会影响 JavaScript 环境。

发送事件到 JavaScript

Native 模块可以在不被直接调用的情况下向 JavaScript 发送事件信号。最简单的方法是使用 eventDispatcher
：

#import "RCTBridge.h"
#import "RCTEventDispatcher.h"
@implementation CalendarManager
@synthesize bridge = _bridge;
- (void)calendarEventReminderReceived:(NSNotification *)notification
{
NSString *eventName = notification.userInfo[@"name"];
[self.bridge.eventDispatcher sendAppEventWithName:@"EventReminder"
body:@{@"name": eventName}];
}
@end

JavaScript 代码可以订阅这些事件：

var subscription = DeviceEventEmitter.addListener(
'EventReminder',
(reminder) => console.log(reminder.name)
);
...
// Don't forget to unsubscribe
subscription.remove();

更多的向 JavaScript 发送事件的例子，请看 RCTLocationObserver。

Native 模块(Android)

有时候一个应用需要访问 React Native 平台目前没有对应模块的 API 。也许你需要复用一些已经存在的 Java 代码而不需要在 JavaScript 里面重新实现，或者写一些高性能，多线程的代码，比如图片处理，数据库，或者任何先进的扩展。

我们设计了 React Native 以致于你可以写一些真正的原生代码并且可以完全拥有系统的权限的能力。这是一个更加先进的特征，并且我们不希望这是传统开发过程中的一部分，然而它存在是非常重要的。如果 React Native 不支持你需要的原生特征，那么你应该可以自己创建它。

Toast 模块

这个引导将会使用这个 Toast 的例子。我们将会可以通过使用 JavaScript 创建一个 toast 消息。

我们从创建一个原生模块开始。一个原生模块是一个通常继承 ReactContextBaseJavaModule
类的 Java 类，并且实现了 JavaScript 需要实现的方法。我们这里的目标是允许通过使用 JavaScript 书写 ToastAndroid.show('Awesome', ToastAndroid.SHORT);
就可以在屏幕上面显示一个短短的 toast 消息。

package

com.facebook.react.modules.toast
;

 
import

android.widget.Toast
;

 
import

com.facebook.react.bridge.NativeModule
;

import

com.facebook.react.bridge.ReactApplicationContext
;

import

com.facebook.react.bridge.ReactContext
;

import

com.facebook.react.bridge.ReactContextBaseJavaModule
;

import

com.facebook.react.bridge.ReactMethod
;

 
import

java.util.Map
;

 
public

class
ToastModule
extends
ReactContextBaseJavaModule
{

 

private

static

final

String
DURATION_SHORT_KEY
=

"SHORT"
;


private

static

final

String
DURATION_LONG_KEY
=

"LONG"
;

 

public
ToastModule
(
ReactApplicationContext reactContext
)

{


super
(
reactContext
)
;


}

}

ReactContextBaseJavaModule
需要一个叫做 getName
的方法被实现。这个方法的目的就是返回在 JavaScript 里面表示这个类的叫做 NativeModule
的字符串的名字。在这里我们调用 ToastAndroid
因此我们可以在 JavaScript 里面使用 React.NativeModules.ToastAndroid
来得到它。

@Override

public

String
getName
(
)

{


return

"ToastAndroid"
;


}

一个可选的叫做 getConstants
的方法会将传递给 JavaScript 的常量返回。这个方法的实现并不是必须的，但是却对在 JavaScript 和 Java 中同步的预定义的关键字的值非常重要。

@Override

public
Map
<
String
, Object
>
getConstants
(
)

{


final
Map
<
String
, Object
>
constants
=

new
HashMap
<>
(
)
;

constants.
put
(
DURATION_SHORT_KEY, Toast.
LENGTH_SHORT
)
;

constants.
put
(
DURATION_LONG_KEY, Toast.
LENGTH_LONG
)
;


return
constants
;


}

给 JavaScript 暴露一个方法，一个 Java 方法需要使用 @ReactMethod
来注解。桥接的方法的返回值类型总是 void
。React Native 的桥接是异步的，因此将一个结果传递给 JavaScript 的唯一方式就是使用回调函数或者调用事件（见下面）。

@ReactMethod

public

void
show
(
String
message,
int
duration
)

{

Toast.
makeText
(
getReactApplicationContext
(
)
, message, duration
)
.
show
(
)
;


}

参数类型

下面的参数类型是被使用 @ReactMethod
注解的方法支持的，并且它们直接对应 JavaScript 中对应的值。

Boolean -> Bool
Integer -> Number
Double -> Number
Float -> Number
String -> String
Callback -> function
ReadableMap -> Object
ReadableArray -> Array

注册模块

在使用 Java 的最后一步就是注册这个模块，这将在你的应用包中的 createNativeModules
发生。如果一个模块没有被注册，那么它在 JavaScript 是不可用的。

class
AnExampleReactPackage
implements
ReactPackage
{

 
...
 
@Override

public
List
<
NativeModule
>
createNativeModules
(

ReactApplicationContext reactContext
)

{

List
<
NativeModule
>
modules
=

new
ArrayList
<>
(
)
;

 
modules.
add
(
new
ToastModule
(
reactContext
)
)
;

 

return
modules
;


}

当包被创建的时候，它需要提供给 ReactInstanceManager 。可以看 UIExplorerActivity.java
这个例子。当你初始化一个新工程的时候默认的包是MainReactPackage.java
。

mReactInstanceManager
=
ReactInstanceManager.
builder
(
)

.
setApplication
(
getApplication
(
)
)

.
setBundleAssetName
(
"AnExampleApp.android.bundle"
)

.
setJSMainModuleName
(
"Examples/AnExampleApp/AnExampleApp.android"
)

.
addPackage
(
new
AnExampleReactPackage
(
)
)

.
setUseDeveloperSupport
(
true
)

.
setInitialLifecycleState
(
LifecycleState.
RESUMED
)

.
build
(
)
;

为了能让你更加方便的从 JavaScript 访问你的新功能的时候，通常会将原生模块包裹在一个 JavaScript 模块里面。这不是必须的，但是节省了你的类库的使用者每次都要 pull NativeModules
的不便。这个 JavaScript 文件也为你增加任何 JavaScript 端功能提供了方便。

/**
* @providesModule ToastAndroid
*/

 
'use strict'
;

 
/**
* This exposes the native ToastAndroid module as a JS module. This has a function 'showText'
* which takes the following parameters:
*
* 1. String message: A string with the text to toast
* 2. int duration: The duration of the toast. May be ToastAndroid.SHORT or ToastAndroid.LONG
*/

var
{
NativeModules
}

=
require
(
'react-native'
)
;

module.
exports

=
NativeModules.
ToastAndroid
;

现在，在你的 JavaScript 文件里面你可以像下面这样调用方法：

var ToastAndroid = require('ToastAndroid')
ToastAndroid.show('Awesome', ToastAndroid.SHORT);
 
// Note: We require ToastAndroid without any relative filepath because
// of the @providesModule directive. Using @providesModule is optional.

远不止 Toasts

回调

原生模块也提供了一种特殊的参数－一个回调。在大多数情况下这是给 JavaScript 返回结果使用的。

public

class
UIManagerModule
extends
ReactContextBaseJavaModule
{

 
...
 
@ReactMethod

public

void
measureLayout
(


int
tag,

int
ancestorTag,
Callback errorCallback,
Callback successCallback
)

{


try

{

measureLayout
(
tag, ancestorTag, mMeasureBuffer
)
;


float
relativeX
=
PixelUtil.
toDIPFromPixel
(
mMeasureBuffer
[
0
]
)
;


float
relativeY
=
PixelUtil.
toDIPFromPixel
(
mMeasureBuffer
[
1
]
)
;


float
width
=
PixelUtil.
toDIPFromPixel
(
mMeasureBuffer
[
2
]
)
;


float
height
=
PixelUtil.
toDIPFromPixel
(
mMeasureBuffer
[
3
]
)
;

successCallback.
invoke
(
relativeX, relativeY, width, height
)
;


}

catch

(
IllegalViewOperationException e
)

{

errorCallback.
invoke
(
e.
getMessage
(
)
)
;


}


}

 
...

使用以下方法可以来访问在 JavaScript 里面可以使用：

UIManager.measureLayout(
100,
100,
(msg) => {
console.log(msg);
},
(x, y, width, height) => {
console.log(x + ':' + y + ':' + width + ':' + height);
}
);

一个原生模块支持只调用一次它的回调。它可以保存这个回调，并且在以后调用。

有一点需要强调的就是在原生方法完成之后这个回调并不是立即被调用的－请记住桥接通信是异步的，因此这个也在运行时循环里面。

线程

原生模块不应该设想有它们将在哪些线程里面被调用，因为目前的任务在以后改变是主要的。如果一个块调用是必须的，那么耗时操作将会被分配到间歇性的工作线程中，并且任何回调将会从这里开始。

给 JavaScript 传递事件

原生模块可以不需要立即被调用就可以给 JavaScript 发送事件。最简单的方式就是使用从 ReactContext
获得的 RCTDeviceEventEmitter
，就像下面的代码片段：

...
private

void
sendEvent
(
ReactContext reactContext,

String
eventName,
@Nullable WritableMap params
)

{

reactContext
.
getJSModule
(
DeviceEventManagerModule.
RCTDeviceEventEmitter
.
class
)

.
emit
(
eventName, params
)
;

}

...
WritableMap
params
=
Arguments.
createMap
(
)
;

...
sendEvent
(
reactContext,
"keyboardWillShow"
, params
)
;

JavaScript 模块在那时可以通过使用 Subscribable
的 addListenerOn
来注册并且接收事件。

var RCTDeviceEventEmitter = require('RCTDeviceEventEmitter');
...
 
var ScrollResponderMixin = {
mixins: [Subscribable.Mixin],
 
 
componentWillMount: function() {
...
this.addListenerOn(RCTDeviceEventEmitter,
'keyboardWillShow',
this.scrollResponderKeyboardWillShow);
...
},
scrollResponderKeyboardWillShow:function(e: Event) {
this.keyboardWillOpenTo = e;
this.props.onKeyboardWillShow && this.props.onKeyboardWillShow(e);
},

Native UI 组件(iOS)

有许多 native UI 小部件可以应用到最新的应用程序中——其中一些是平台的一部分，另外的可以用作第三方库，并且更多的是它们可以用于你自己的选集中。React Native 有几个最关键的平台组件已经包装好了，如 ScrollView
和 TextInput
，但不是所有的组件都被包装好了，当然了，你为先前的应用程序写的组件肯定没有包装好。幸运的是，为了与 React Native 应用程序无缝集成，将现存组件包装起来是非常容易实现的。

正如 native 模块指南，这也是一种更高级的指南，假定你对 iOS 编程有一定的了解。本指南将向你展示如何构建一个本地的 UI 组件，带你实现在核心 React Native 库中可用的现存的 MapView
组件的子集。

iOS MapView 示例

如果说我们想在我们的应用程序中添加一个交互式的 Map——不妨用 MKMapView
，我们只需要让它在 JavaScript 中可用。

Native 视图是通过 RCTViewManager
的子类创建和操做的。这些子类的功能与视图控制器很相似，但本质上它们是单件模式——桥只为每一个子类创建一个实例。它们将 native 视图提供给 RCTUIManager
，它会传回到 native 视图来设置和更新的必要的视图属性。RCTViewManager
通常也是视图的代表，通过桥将事件发送回 JavaScript。

发送视图是很简单的：

• 创建基本的子类。
• 添加标记宏 RCT_EXPORT_MODULE()
  。
• 实现 -(UIView *)view
  方法。

// RCTMapManager.m
#import <MapKit/MapKit.h>
 
#import "RCTViewManager.h"
 
@interface RCTMapManager : RCTViewManager
@end
@implementation RCTMapManager
RCT_EXPORT_MODULE()
- (UIView *)view
{
return [[MKMapView alloc] init];
}
@end

然后你需要一些 JavaScript 使之成为有用的 React 组件：

// MapView.js
var { requireNativeComponent } = require('react-native');
module.exports = requireNativeComponent('RCTMap', null);

现在这是 JavaScript 中一个功能完整的 native map 视图组件了，包括 pinch-zoom 和其他 native 手势支持。但是我们还不能用 JavaScript 来真正的控制它。

属性

为了使该组件更可用，我们可以做的第一件事是连接一些 native 属性。比如说我们希望能够禁用音高控制并指定可见区域。禁用音高是一个简单的布尔值，所以我们只添加这一行:

// RCTMapManager.m
RCT_EXPORT_VIEW_PROPERTY(pitchEnabled, BOOL)

注意我们显式的指定类型为 BOOL
——当谈到连接桥时，React Native 使用 hood 下的 RCTConvert
来转换所有不同的数据类型，且错误的值会显示明显的 “RedBox” 错误使你知道这里有 ASAP 问题。当一切进展顺利时，这个宏就会为你处理整个实现。

现在要真正的实现禁用音高，我们只需要在 JS 中设置如下所示属性：

// MyApp.js
<MapView pitchEnabled={false} />

但是这不是很好记录——为了知道哪些属性可用以及它们接收了什么值，你的新组件的客户端需要挖掘 objective-C 代码。为了更好的实现这一点，让我们做一个包装器组件并用 React PropTypes
记录接口：

// MapView.js
var React = require('react-native');
var { requireNativeComponent } = React;
class MapView extends React.Component {
render() {
return <RCTMap {...this.props} />;
}
}
var RCTMap = requireNativeComponent('RCTMap', MapView);
MapView.propTypes = {
/**
* When this property is set to `true` and a valid camera is associated
* with the map, the camera’s pitch angle is used to tilt the plane
* of the map. When this property is set to `false`, the camera’s pitch
* angle is ignored and the map is always displayed as if the user
* is looking straight down onto it.
*/
pitchEnabled: React.PropTypes.bool,
};
module.exports = MapView;

现在我们有一个很不错的已记录的包装器组件，它使用非常容易。注意我们为新的 MapView
包装器组件将第二个参数从 null
改为 requireNativeComponent
。这使得基础设施验证了 propTypes 匹配native 工具来减少 ObjC 和 JS 代码之间的不匹配的可能。

接下来，让我们添加更复杂的 region
工具。从添加 native 代码入手：

// RCTMapManager.m
RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, RCTMap)
{
[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];
}

好的，这显然比之前简单的 BOOL
情况更加复杂。现在我们有一个 MKCoordinateRegion
类型，该类型需要一个转换函数，并且我们有自定义的代码，这样当我们从 JS 设置区域时，视图可以产生动画效果。还有一个 defaultView
，如果 JS 发送给我们一个 null 标记，我们使用它将属性重置回默认值。

当然你可以为你的视图编写任何你想要的转换函数——下面是通过 RCTConvert
的两类来实现 MKCoordinateRegion
的例子：

@implementation RCTConvert(CoreLocation)
RCT_CONVERTER(CLLocationDegrees, CLLocationDegrees, doubleValue);
RCT_CONVERTER(CLLocationDistance, CLLocationDistance, doubleValue);
+ (CLLocationCoordinate2D)CLLocationCoordinate2D:(id)json
{
json = [self NSDictionary:json];
return (CLLocationCoordinate2D){
[self CLLocationDegrees:json[@"latitude"]],
[self CLLocationDegrees:json[@"longitude"]]
};
}
@end
@implementation RCTConvert(MapKit)
+ (MKCoordinateSpan)MKCoordinateSpan:(id)json
{
json = [self NSDictionary:json];
return (MKCoordinateSpan){
[self CLLocationDegrees:json[@"latitudeDelta"]],
[self CLLocationDegrees:json[@"longitudeDelta"]]
};
}
+ (MKCoordinateRegion)MKCoordinateRegion:(id)json
{
return (MKCoordinateRegion){
[self CLLocationCoordinate2D:json],
[self MKCoordinateSpan:json]
};
}

这些转换函数是为了安全地处理任何 JSON 而设计的，当出现丢失的键或开发人员错误操作时，JS 可能向它们抛出 “RedBox” 错误并返回标准的初始化值。

为完成对 region
工具的支持，我们需要把它记录到 propTypes
中(否则我们将得到一个错误，即 native 工具没有被记录)，然后我们就可以按照设置其他工具的方式来设置它：

// MapView.js
MapView.propTypes = {
/**
* When this property is set to `true` and a valid camera is associated
* with the map, the camera’s pitch angle is used to tilt the plane
* of the map. When this property is set to `false`, the camera’s pitch
* angle is ignored and the map is always displayed as if the user
* is looking straight down onto it.
*/
pitchEnabled: React.PropTypes.bool,
/**
* The region to be displayed by the map.
*
* The region is defined by the center coordinates and the span of
* coordinates to display.
*/
region: React.PropTypes.shape({
/**
* Coordinates for the center of the map.
*/
latitude: React.PropTypes.number.isRequired,
longitude: React.PropTypes.number.isRequired,
/**
* Distance between the minimum and the maximum latitude/longitude
* to be displayed.
*/
latitudeDelta: React.PropTypes.number.isRequired,
longitudeDelta: React.PropTypes.number.isRequired,
}),
};
// MyApp.js
render() {
var region = {
latitude: 37.48,
longitude: -122.16,
latitudeDelta: 0.1,
longitudeDelta: 0.1,
};
return <MapView region={region} />;
}

在这里你可以看到该区域的形状在 JS 文档中是显式的——理想情况下我们可以生成一些这方面的东西，但是这没有实现。

事件

所以现在我们有一个 native map 组件，可以从 JS 很容易的控制，但是我们如何处理来自用户的事件，如 pinch-zooms 或平移来改变可见区域？关键是要使 RCTMapManager
成为它发送的所有视图的代表，并把事件通过事件调度器发送给 JS。这看起来如下所示(从整个实现中简化出来的部分)：

// RCTMapManager.m
#import "RCTMapManager.h"
 
#import <MapKit/MapKit.h>
 
#import "RCTBridge.h"
 
#import "RCTEventDispatcher.h"
 
#import "UIView+React.h"
 
@interface RCTMapManager() <MKMapViewDelegate>
@end
@implementation RCTMapManager
RCT_EXPORT_MODULE()
- (UIView *)view
{
MKMapView *map = [[MKMapView alloc] init];
map.delegate = self;
return map;
}
#pragma mark MKMapViewDelegate
 
- (void)mapView:(RCTMap *)mapView regionDidChangeAnimated:(BOOL)animated
{
MKCoordinateRegion region = mapView.region;
NSDictionary *event = @{
@"target": mapView.reactTag,
@"region": @{
@"latitude": @(region.center.latitude),
@"longitude": @(region.center.longitude),
@"latitudeDelta": @(region.span.latitudeDelta),
@"longitudeDelta": @(region.span.longitudeDelta),
}
};
[self.bridge.eventDispatcher sendInputEventWithName:@"topChange" body:event];
}

你可以看到我们设置管理器为它发送的每个视图的代表，然后在代表方法 -mapView:regionDidChangeAnimated:
中，区域与 reactTag
目标相结合来产生事件，通过 sendInputEventWithName:body
分派到你应用程序中相应的 React 组件实例中。事件名称 @"topChange"
映射到从 JavaScript 中回调的 onChange
（这里查看 mappings ）。原始事件调用这个回调，我们通常在包装器组件中处理这个过程来实现一个简单的 API：

// MapView.js
class MapView extends React.Component {
constructor() {
this._onChange = this._onChange.bind(this);
}
_onChange(event: Event) {
if (!this.props.onRegionChange) {
return;
}
this.props.onRegionChange(event.nativeEvent.region);
}
render() {
return <RCTMap {...this.props} onChange={this._onChange} />;
}
}
MapView.propTypes = {
/**
* Callback that is called continuously when the user is dragging the map.
*/
onRegionChange: React.PropTypes.func,
...
};

样式

由于我们所有的 native react 视图是 UIView
的子类，大多数样式属性会像你预想的一样内存不足。然而，一些组件需要默认的样式，例如 UIDatePicker
，大小固定。为了达到预期的效果，默认样式对布局算法来说是非常重要的，但是我们也希望在使用组件时能够覆盖默认的样式。DatePickerIOS
通过包装一个额外的视图中的 native 组件实现这一功能，该额外的视图具有灵活的样式设计，并在内部 native 组件中使用一个固定的样式(用从 native 传递的常量生成)：

// DatePickerIOS.ios.js
var RCTDatePickerIOSConsts = require('NativeModules').UIManager.RCTDatePicker.Constants;
...
render: function() {
return (
<View style={this.props.style}>
<RCTDatePickerIOS
ref={DATEPICKER}
style={styles.rkDatePickerIOS}
...
/>
</View>
);
}
});
var styles = StyleSheet.create({
rkDatePickerIOS: {
height: RCTDatePickerIOSConsts.ComponentHeight,
width: RCTDatePickerIOSConsts.ComponentWidth,
},
});

RCTDatePickerIOSConsts
常量是通过抓取 native 组件的实际框架从 native 中导出的，如下所示：

// RCTDatePickerManager.m
- (NSDictionary *)constantsToExport
{
UIDatePicker *dp = [[UIDatePicker alloc] init];
[dp layoutIfNeeded];
return @{
@"ComponentHeight": @(CGRectGetHeight(dp.frame)),
@"ComponentWidth": @(CGRectGetWidth(dp.frame)),
@"DatePickerModes": @{
@"time": @(UIDatePickerModeTime),
@"date": @(UIDatePickerModeDate),
@"datetime": @(UIDatePickerModeDateAndTime),
}
};
}

本指南涵盖了衔接自定义 native 组件的许多方面，但有你可能有更多需要考虑的地方，如自定义 hooks 来插入和布局子视图。如果你想了解更多，请在源代码中查看实际的 RCTMapManager
和其他组件。

Native UI 组件(Android)

这里有很多本地的 UI 部件准备被用到最新的应用程序中 - 其中一些是平台的一部分，其他的部分可以作为第三方库来使用，而且仍然还有更多的部分可能是在你自己的投资组合中使用。React Native 已经将几个最关键的平台组件进行了打包，如同 ScrollView
和 TextInput
，但是并不是所有都被打包了，所以当然也不可能是您以前写的应用程序。幸运的是，通过使用 React Native 应用程序可以很容易的将现有的组件进行无缝集成打包。

就如同本地模块指南，这是一个建立在假定你对 Android SDK 编程有些熟悉的基础上的更高级的指南。本指南将显示你该如何构建一个本地的 UI 组件， 帮助你遍历执行可用核心 React Native
库中可以使用的现有的 ImageViewcomponent 的一个子集。

ImageView 示例

在本例中我们将要完全了解实施要求来实现在 JavaScript 中允许使用 ImageViews。

本地视图是由扩展 ViewManage
或者更普遍的 SimpleViewManager
所创建和操纵的。在这种情况下 SimpleViewManager
是很方便的，因为它适用于普遍的属性，比如背景颜色、 不透明度和 Flexbox 布局。当然也有其他例子,当您在使用 FrameLayout 进行包装组件的时候，那么这时候您需要使用 ViewManage
，比如 ProgressBar。

这些子类在本质上是很单一的 — — 每个子类之中只有一个实例是通过这个桥接器创建的。他们将本地视图传递到了 NativeViewHierarchyManager
之中，这代表回到了通过使用它们原始的方法来设置并更新这些必要的视图的属性。ViewManagers
通常也是这些视图的代表，它通过该桥接器将事件发送回 JavaScript。

传递一个视图很简单：

1.创建 ViewManager 子类
2.使用 @UIProp
注释视图属性
3.执行 createViewInstance
方法
4.执行 updateView
方法
5.在应用程序软件包中的 createViewManagers
中注册管理器
6.执行 JavaScript 模块

1. 创建 ViewManager
子类

在本示例中，我们通过继承 ReactImageView
类型的 SimpleViewManager
来创建的视图管理器类 ReactImageManager
。它是由管理器管理的对象类型，这将成为一个本地视图。通过 getName
返回的名字将被用来从 Javascript 中引用本地视图类型。

...
 
public

class
ReactImageManager
extends
SimpleViewManager
<
ReactImageView
>

{

 

public

static

final

String
REACT_CLASS
=

"RCTImageView"
;

 
@Override

public

String
getName
(
)

{


return
REACT_CLASS
;


}

2. 注释视图属性

我们在 JavaScript 中使用 @UIProp
来注释需要被反映出来的属性。目前支持的类型有 BOOLEAN
, NUMBER
, STRING
, MAP
和 ARRAY
。每个属性都被声明为公共静态最终字符串常量，并且给它们分配的值在 JavaScript 中都会成为属性的名称。

@UIProp
(
UIProp.
Type
.
STRING
)


public

static

final

String
PROP_SRC
=

"src"
;

@UIProp
(
UIProp.
Type
.
NUMBER
)


public

static

final

String
PROP_BORDER_RADIUS
=

"borderRadius"
;

@UIProp
(
UIProp.
Type
.
STRING
)


public

static

final

String
PROP_RESIZE_MODE
=
ViewProps.
RESIZE_MODE
;

3. 执行 createViewInstance
方法

我们使用 CreateViewInstance
方法来创建视图，视图应将其自身初始化到默认状态，然后任何属性都会通过后续调用 updateView
来进行设置。

@Override

public
ReactImageView createViewInstance
(
ThemedReactContext context
)

{


return

new
ReactImageView
(
context, Fresco.
newDraweeControllerBuilder
(
)
, mCallerContext
)
;


}

4. 执行 updateView
方法

和 iOS 中有些不同的是在 Android 中，不是通过自动调用 setter 方法来给一个视图的属性进行赋值； 对于 Android 而言，你需要通过您的 ViewManager
中的 updateView
方法手动调用 setter。从 CatalystStylesDiffMap
中提取出来值，并且传递给视图实例。它是通过 updateView
和视图类的组合来检查属性的有效性，并采取相应的行动。

@Override

public

void
updateView
(
final
ReactImageView view,

final
CatalystStylesDiffMap props
)

{


super
.
updateView
(
view, props
)
;

 

if

(
props.
hasKey
(
PROP_RESIZE_MODE
)
)

{

view.
setScaleType
(

ImageResizeMode.
toScaleType
(
props.
getString
(
PROP_RESIZE_MODE
)
)
)
;


}


if

(
props.
hasKey
(
PROP_SRC
)
)

{

view.
setSource
(
props.
getString
(
PROP_SRC
)
)
;


}


if

(
props.
hasKey
(
PROP_BORDER_RADIUS
)
)

{

view.
setBorderRadius
(
props.
getFloat
(
PROP_BORDER_RADIUS, 0.0f
)
)
;


}

view.
maybeUpdateView
(
)
;


}

}

5. 注册 ViewManager

在 Java 中的最后一步是通过应用程序包的成员函数 createViewManagers
在应用程序中注册 ViewManager，这恰巧和 Native Modules 有些相似。

@Override

public
List
<
ViewManager
>
createViewManagers
(

ReactApplicationContext reactContext
)

{


return

Arrays
.
<
ViewManager
>
asList
(


new
ReactImageManager
(
)


)
;


}

6. 执行 JavaScript 模块

最后一步就是创建 JavaScript 模块来为您的新视图的用户定义 Java 和 JavaScript 之间的连接层。大量工作都是由 Java 和 JavaScript 中的 React 代码所完成，那么所有留给你的工作就是去描述 propTypes
。

// ImageView.js
 
var { requireNativeComponent } = require('react-native');
 
var iface = {
name: 'ImageView',
propTypes: {
src: PropTypes.string,
borderRadius: PropTypes.number,
resizeMode: PropTypes.oneOf(['cover', 'contain', 'stretch']),
},
};
 
module.exports = requireNativeComponent('RCTImageView', iface);

requireNativeComponent
通常具有两个参数，第一个是本地视图的名称，第二个是描述组件接口的对象。组件接口应该声明一个友好的名称
在调试消息中使用，并且必须声明本地视图所反映的 propTypes
。PropTypes
用于检查用户使用本地视图的有效性。

事件

现在我们知道了如何公开使用 JS 中那些可以轻松控制的本地视图组件。但是我们该如何处理用户的事件呢，比如捏拉缩放或平移？当本地事件发生的时候，本地代码应该把事件传递给视图中的 JavaScript 代表，并且这两个视图都与 getId()
方法返回的值相连接。

class
MyCustomView
extends

View

{

...

public

void
onReceiveNativeEvent
(
)

{

WritableMap event
=
Arguments.
createMap
(
)
;

event.
putString
(
"message"
,
"MyMessage"
)
;

ReactContext reactContext
=

(
ReactContext
)
getContext
(
)
;

reactContext.
getJSModule
(
RCTEventEmitter.
class
)
.
receiveEvent
(

getId
(
)
,

"topChange"
,
event
)
;


}

}

名字为 topChange
的事件对应于 JavaScript 里面的 onChange
回调 (映射是在 UIManagerModuleConstants.java
里面)。使用原始的事件来调用此回调。对于该事件，我们通常在包装组件中对它进行加工来形成一个更简单的 API。

// MyCustomView.js
 
class MyCustomView extends React.Component {
constructor() {
this._onChange = this._onChange.bind(this);
}
_onChange(event: Event) {
if (!this.props.onChange) {
return;
}
this.props.onChange(event.nativeEvent.message);
}
render() {
return <RCTMyCustomView {...this.props} onChange={this._onChange} />;
}
}
MyCustomView.propTypes = {
/**
* Callback that is called continuously when the user is dragging the map.
*/
onChange: React.PropTypes.func,
...
};

链接库

不是每个应用程序都使用所有的 native 功能，也不是包含支持这些特性的代码就会影响二进制大小...但是我们仍然想在你需要它们的时候添加这些特性变得容易。

记住我们把这些特性作为独立的静态库公开。

对于大多数的 libs 来说，它就像拖两个文件一样简单，有时第三步将是必要的,但仅此而已。

我们用 React Native 推出的所有的库存在在根仓库的 Libraries
文件夹中。它们中的一些是纯粹的 JavaScript，您只需要 require
它。其他的 libraries 也依赖于一些 native 代码，在这种情况下你需要将这些文件添加到你的应用程序中，否则当你尝试使用 library 时，程序将抛出一个错误。

这几个步骤来链接包含 native 代码的库

步骤 1

如果库有 native 代码，那么在它的文件夹必须有一个 .xcodeproj
文件。拖动这个文件到 Xcode 项目中(通常在 Xcode 的 Libraries
小组)；

图片 3.1 linking-libraries

步骤 2

点击你的主项目文件(代表 .xcodeproj
的文件)选择 Build Phases
，从你正在导入 Link Binary With Libraries
的库中的 Products
文件夹中，拖动静态库。

图片 3.2 linking-libraries

步骤 3

不是每个库都需要这一步，你需要考虑的是：

我在编译时需要知道库的内容吗？

这意味着，你是在 native 网站中使用库还是只是在 JavaScript 中使用库呢？如果你只是在 JavaScript 中使用它，这样做很好!

对于我们用除了 PushNotificationIOS
和 LinkingIOS
的 React Native 推出的库来说，这个步骤是不必要的。

以 PushNotificationIOS
为例，每次你收到一个新的 push notifiation，你必须从 AppDelegate
的库中调用方法。

为此，我们需要知道库的头。为了实现这个，你必须在你的项目文件中选择 Build Settings
，搜索 Header Search Paths
。你应该包括通往库的路径(如果有相关文件的子目录，记得使它 recursive
，如例子中的 React
)。

图片 3.3 linking-libraries

调试 React Native 应用

访问应用程序内开发者菜单：

1. 在 iOS 中摇动设备或在虚拟机里按组合键 control + ⌘ + z
   .
2. 在 Android 中摇动设备或按硬件菜单按钮 （旧的设备中以及大多数虚拟机中都有效，例如， 在 genymotion 中，你可以按组合键 ⌘ + m
   来模拟点击硬件菜单按钮）

提示

要禁用产品构建的开发人员菜单:

1. 在 iOS 中，打开 Xcode 中的项目，选择 Product
   → Scheme
   → Edit Scheme...
   (或按组合键 ⌘ + <
   ).下一步, 在左边的菜单中选择 Run
   然后将 Build Configuration 改为 Release
   。
2. 在 Android 中， 默认情况下, 由 Gradle 建立发布的开发者菜单将被禁用(例如， Gralde 的 assembleRelease
   任务)。 虽然这种行为可以通过传递给 ReactInstanceManager#setUseDeveloperSupport
   正确的值来自定义。

重加载

选择 Reload
(或者在 iOS 虚拟机中按组合键 ⌘ + r
) 将会重新加载作用于你的应用程序中的 JavaScript 。 如果你增加了新的资源 (例如，将一幅图添加到 iOS 中的 Images.xcassets
，或 Android 中的 res/drawable
文件夹) 或者对任何本地代码进行修改 ( iOS 中的 Objective-C/Swift 代码或 Android 中的 Java/C++ 代码),你将需要重新生成该应用程序以使更改生效。

Chrome 开发工具

在 Chrome 中调试 JavaScript 代码，在开发者菜单选择 Debug in Chrome
。 将打开一个新的标签 http://localhost:8081/debugger-ui。

在 Chrome 中，按下组合键 ⌘ + option + i
或选择 View
→ Developer
→ Developer Tools
切换开发工具控制台。 启用 捕获异常时暂停 以获得更佳的调试体验。

在实际设备上进行调试：

1. 在 iOS 中，- 打开文件 RCTWebSocketExecutor.m
   并更改 localhost
   为你的电脑IP地址。摇动设备打开开发菜单，选择启动调试。
2. 在 Android 中， 如果你正在运行通过 USB 连接的 Android 5.0+ 设备，您可以使用 adb
   命令行工具来从设备到您的计算机设置端口转发。 运行： adb reverse 8081 8081
   (参阅 此链接 以获得 adb
   命令详情)。 或者，你可以打开设备上开发菜单并选择开发设置，然后为设备设置更新调试服务器主机到您的计算机的 IP 地址。

React 开发工具 (可选)

安装 React Developer Tools 作为谷歌浏览器的扩展。这将允许您通过 React
在开发工具中导航组件层次结构 ( 更多详情参阅 facebook/react-devtools )。

Live Reload

这个选项可触发 JS 在连接设备/模拟器上自动刷新。启用此选项：

1. 在 iOS 中，通过开发者菜单选择 Enable Live Reload
   ，当 JavaScript 有任何改动时，应用程序会自动重新加载。
2. 在 Android 中，启动开发菜单，进入 Dev Settings
   并选择 Auto reload on JS change
   选项。

FPS (每秒帧数) 显示器

在 0.5.0-rc
以及更高的版本，为了帮助调试性能问题，你可以在开发者菜单启用 FPS 图形叠置。

测试

运行测试和贡献

React Native 回购有几个你可以运行的测试，来验证你没有用PR引起拟合。这些测试是用 Travis 持续集成系统运行的，并自动的向你的 PR 发布结果。你也可以在 IntegrationTest 和在 Xcode 中的 UIExplorer 应用中，使用 cmd+U 本地运行。您可以通过在命令行的 npm test
运行 jest 测试。但是我们目前还没有很大的测试覆盖率，所以大多数的变化仍将需要大量手工验证，但如果你想帮助我们提高我们的测试覆盖率，我们是非常欢迎的!

Jest 测试

Jest 测试是 JS-only 测试，运行在节点命令行上。测试位于它们测试的文件 __tests__
目录中，还有一个对不是位于故障隔离和最大速度测试下的积极模拟功能的强调。你可以用来自 react-native 根的 npm test
运行现有的 React Native jest 测试，并且我们鼓励你为你想做出贡献的任何组件添加你自己的测试。基本示例请看 getImageSource-test.js
。

集成测试

React Native 提供设施，使测试需要 native 和 JS 组件进行跨桥交互的集成组件更容易。两个主要组件是 RCTTestRunner
和 RCTTestModule
。RCTTestRunner
设置了 React Native 环境并提供设备运行测试，正如在 Xcode 中的 XCTestCase
(runTest:module
是最简单的方法)。RCTTestModule
和 TestModule
一样，通过 NativeModules
被导出到 JS 中。测试写在 JS 中，当它们完成时，必须调用 TestModule.markTestCompleted()
，否则测试将超时失败。测试失败主要是通过抛出异常表示。它还可以用 runTest:module:initialProps:expectErrorRegex:
或 runTest:module:initialProps:expectErrorBlock:
测试错误条件，它预计抛出一个错误并验证错误与提供的标准相匹配。对于例子的使用，请看 IntegrationTestHarnessTest.js
和 IntegrationTestsTests.m
。

快照测试

常见的一种集成测试是快照测试。这些测试渲染一个组件，并使用 TestModule.verifySnapshot()
验证参考图像的屏幕快照，在幕后使用 FBSnapshotTestCase
库。参考图像通过在 RCTTestRunner
中设置 recordMode = YES
被记录下来，然后运行测试。快照在 32 位和 64 位系统中略有不同，且在不同的操作系统版本中也有所不同，所以建议你使用正确的配置运行测试。同时强烈建议所有网络数据被模拟，以及其他潜在的麻烦的依赖性。基本示例请看 SimpleSnapshotTest
。

在设备上运行

注意,在设备上运行需要 Apple Developer 账号，且需要配置你的 iPhone。本指南仅覆盖 React Native 特定的主题。

从设备访问开发服务器

你可以使用开发服务器在设备中快速迭代。要做到这一点，你的笔记本电脑和你的手机必须处于相同的 wifi 网络中。

1. 打开 iOS / AppDelegate.m
   
2. 更改 URL 中的 IP，从 Localhost
   改成你的笔记本电脑的 IP
3. 在 Xcode 中，选择你的手机作为构建目标，并按“构建和运行”

提示
晃动设备来打开开发菜单(重载、调试等)

使用离线包

你也可以将应用程序本身的所有 JavaScript 代码打包。这样你可以在开发服务器没有运行时测试它，并把应用程序提交到到 AppStore。

1. 打开 iOS / AppDelegate.m
   
2. 遵循“选项 2”的说明：
   • 取消 jsCodeLocation =[[NSBundle mainBundle]…
     
   • 在你应用程序的根目录的终端运行给定 curl
     命令

Packager 支持几个选项：

• dev
  (默认的 true)——设置了 __DEV__
  变量的值。当是 true
  时，它会打开一堆有用的警告。对于产品，它建议使用 dev = false
  。
• minify
  (默认的 false)——只要不通过 UglifyJS 传输 JS 代码。

故障排除

如果 curl
命令失败，确保 packager 在运行。也尝试在它的结尾添加 ——ipv4
标志。

如果你刚刚开始了你的项目，main.jsbundle
可能不会被包含到 Xcode 项目中。要想添加它,右键单击你的项目目录，然后单击“添加文件……”——选择生成的 main.jsbundle
文件。

在设备上运行(Android)

USB 调试

在设备上开发最简单的方式就是使用 USB 调试。首先请确保你有 USB debugging enabled on your device。一旦在设备上调试是被允许的，在连接的设备上你可以以同样的方式在模拟器里面使用 react-native run-android
来安装并且运行你的 React Native 应用。

从设备上获取开发服务器

你也可以在设备上使用开发服务器快速集成。照着下面的描述的步骤之一来给你的设备构建在你的电脑上运行的开发者服务器。

注意

现在绝大多数的安卓设备没有一个我们来触发开发者模式的硬件按钮键。如果是那样的话，你可以通过摇动来开启开发者模式（重新加载，调试等）。

使用 adb 反转

请注意这个选项只支持运行在安卓 5.0+ (API 21) 上面的设备。

使用 USB 将你的设备连接，并开启调试模式（可以看看上面如何在你的设备上面允许 USB 调试模式）。

1. 运行 adb reverse tcp:8081 tcp:8081
   
2. 你可以使用 Reload JS
   和其他开发者参数，而不需要额外的配置

通过 Wi-Fi 来配置设备并且连接上你的开发者服务器

要做到这一点，你的电脑和你的手机必须在同一个 wifi 网络下。

1. 打开震动菜单 (摇动设备)
2. 前往 Dev Settings
   
3. 前往 Debug server host for device
   
4. 输入该设备的 IP 和 Reload JS
   

与现有的应用程序集成

由于 React 并没有做出关于你其他的技术堆栈的假设——通常在 MVC
中简单的用 V
来表示——这很容易嵌入到现有 non-React Native 应用程序中。事实上，它与另外的最佳实践社区工具集成了，如 CocoaPods。

需求

• CocoaPods - gem install cocoapods
  
• Node.js - brew install node
  

用 CocoaPods 安装 React Native

CocoaPods 是 iOS/Mac 开发的管理工具包。我们需要用它来下载 React Native。如果你还没有安装 CocoaPods，请查看本教程。

当你准备使用 CocoaPods 工作时，添加以下行到 Podfile
中。如果你没有，那么在你的项目的根目录下创建它。

pod 'React'
pod 'React/RCTText'
# Add any subspecs you want to use in your project

记得安装所有你需要的 subspecs。没有 pod 'React/RCTText'
，<Text>
元素不能使用。

然后安装你的 pods：

$ pod install

创建你的 React Native 应用程序

有两块你需要设置：

1. 根 JavaScript 文件，该文件将包含实际的 React Native 应用程序和其他组件
2. 包装 Objective - C 代码，将加载脚本并创建一个 RCTRootView
   来显示和管理你的 React Native 组件

首先，为你的应用程序的 React 代码创建一个目录，并创建一个简单的 index.ios.js
文件：

$ mkdir ReactComponent
$ touch index.ios.js

为 index.ios.js
复制 & 粘贴以下 starter 代码——它是一个 barebones React Native 应用程序：

'use strict';
var React = require('react-native');
var {
Text,
View
} = React;
var styles = React.StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'red'
}
});
class SimpleApp extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>This is a simple application.</Text>
</View>
)
}
}
React.AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

SimpleApp
将是你的模块名称，这将在后面使用。

将容器视图添加到你的应用程序中

现在，你应该为 React Native 组件添加一个容器视图。在你的应用程序中它可以是任何的 UIView
。

图片 3.4 integration app

但是，为了使代码简洁，让我们把 UIView
归入子类。让我们把它命名为 ReactView
。打开你的 Yourproject.xcworkspace
，并创建一个新类 ReactView
(你可以把它命名为任何你喜欢的名字：))。

// ReactView.h
#import <UIKit/UIKit.h>
@interface ReactView : UIView
@end

在一个视图控制器中，想要管理这一视图，继续添加一个出口并将其连接：

// ViewController.m
@interface ViewController ()
@property (weak, nonatomic) IBOutlet ReactView *reactView;
@end

在这里我简单的禁用了 AutoLayout。在实际产品中，你应该自己打开 AutoLayout，并且设置约束。

为容器视图添加 RCTRootView

准备好学习最有趣的这部分了吗？现在我们将在你的 React Native 应用程序存在的位置创建 RCTRootView
。

在 ReactView.m
中，我们首先需要用 index.ios.bundle
的 URI 启动 RCTRootView
。index.ios.bundle
将被 packager 创建，并由 React Native 服务器服务，这将在稍后讨论。

NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"];
// For production use, this `NSURL` could instead point to a pre-bundled file on disk:
//
// NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
//
// To generate that file, run the curl command and add the output to your main Xcode build target:
//
// curl http://localhost:8081/index.ios.bundle -o main.jsbundle
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName: @"SimpleApp"
launchOptions:nil];

然后把它作为 ReactView
的子视图添加。

[self addSubview:rootView];
rootView.frame = self.bounds;

启动开发服务器

在根目录，我们需要启动 React Native 开发服务器。

(JS_DIR=`pwd`/ReactComponent; cd Pods/React; npm run start -- --root $JS_DIR)

这个命令将在我们的 CocoaPods 依赖中启动一个 React Native 开发服务器，来创建捆绑脚本。——root
选项表明 React Native 应用程序的根——这将是我们包含单一 index.ios.js
文件的 ReactComponents
目录。该运行的服务器将通过 http:/ / localhost:8081 / index.ios.bundle
把 index.ios.bundle
打包成可访问的文件。

编译和运行

现在编译并运行你的应用程序。你将看到你的 React Native 应用程序在 ReactView
内部运行。

图片 3.5 integration app

Live 也从模拟器重新加载工作！你已经得到了一个简单的完全封装在 Objective–C UIView
子类中的 React 组件。

总结

所以，当 RCTRootView
初始化时，它会尝试从 React Native 开发服务器中下载，解析并运行包文件。这意味着你所需要做的就是为 RCTRootView
实现你自己的容器视图或视图控制器——RCTRootView
摄取了捆绑的 JS 并呈现出你的 React 组件。万岁!

你可以在这里查看一个示例应用程序的完整源代码。

JavaScript 环境

JavaScript 运行时间

当使用 React Native 时，你将会在两个环境中运行 JavaScript 代码：

• 在模拟器和电话中：JavaScriptCore 是 JavaScript 的引擎，能够驱动 Safari 和 web 视图。由于在 iOS 应用程序中没有可写的可执行的内存，它不用 JIT 运行。
• 使用 Chrome 调试时，它在 Chrome 本身中运行所有 JavaScript 代码，并且通过 WebSocket 与 Objective-C 交互。所以你正在使用 V8。

虽然两个环境很相似，但是你可能会以触及一些矛盾而结束。将来我们很可能去尝试其他 JS 引擎，所以最好避免依赖任何运行时的细节。

JavaScript 转换

React Native 附带许多 JavaScript 转换，使编写代码更愉快。如果你好奇的话，你可以查看所有这些转换的实现。这是完整的列表：

ES5

• 关键字：promise.catch(function() { });
  

ES6

• 箭头函数：<C onPress={() => this.setState({pressed: true})}
  
• 调用传播：Math.max(...array);
  
• 类：class C extends React.Component { render() { return <View />; } }
  
• 解构：var {isActive, style} = this.props;
  
• 迭代：for (var element of array) { }
  
• 计算属性：var key = 'abc'; var obj = {[key]: 10};
  
• 对象 Consise 方法：var obj = { method() { return 10; } };
  
• 对象 short 表示法：var name = 'vjeux'; var obj = { name };
  
• 其他参数：function(type, ...args) { }
  
• 模板： var who = 'world'; var str = 'Hello ${who}';
  

ES7

• 对象传播：var extended = { ...obj, a: 10 };
  
• Trailing Comma 函数：function f(a, b, c,) { }
  

已知 Issues

弃用的模块和原生视图

这是 React Native Android 的首次发行，因此在 iOS 平台上出现的视图不一定都会发布在 Android 上面。我们对社区里面的对下一系列模块和视图的开源代码的反馈非常感兴趣。并不是所有的视图在 iOS 和 Android 上面都有 100% 完全相同的表现，因此在这里就有必要使用一个对应的例子：在 Android 上面使用 ProgressBar，而在 iOS 上面则会使用 ActivityIndicator 来替代。

我们对共同的视图和模块的临时计划包括：

视图

View Pager
Swipe Refresh
Spinner
ART
Maps
Webview

模块

Geo Location
Net Info
Camera Roll
App State
Dialog
Intent
Media
Pasteboard
Alert

在 Android 上发布的模块

现在在 Android 上面发布自定义的原生模块并不是一件轻松的事。贡献者平滑稳定的工作流很重要并且这将在第一次开源版本发布之后被密切关注。当然，我们的目标是形成流水线并且尽量优化在 iOS 和 Android 平台之间的流程。

使用透明度为 0 来覆视图不能被点击

在 iOS 和 Android 之间使用透明度为 0 来处理视图有一个明显的差异。虽然在 iOS 上面允许这些视图被点击并且在这些视图下面的视图也将会接收到触摸输入，但是在 Android 上面这个触摸输入则会被阻塞。这一点可以用下面的一个只能在 iOS 上面点击的例子来演示。

<View style={{flex: 1}}>
<TouchableOpacity onPress={() => alert('hi!')}>
<Text>HELLO!</Text>
</TouchableOpacity>
<View style={{
position: 'absolute',
top: 0,
left: 0,
bottom: 0,
right: 0,
opacity: 0}} />
</View>

在 Android 上面的单独布局节点

在 React Native 的安卓版本一个优化的特征就是对于只能贡献布局的视图不能有原生视图，只有它们的布局属性能够传递到它们的子视图。这个优化是为了给更深层次的 React Native 视图层提供支持，因此默认是开启的。如果你需要一个视图被呈现，或者间歇性的测试检测一个视图是不是只是布局，关闭这个行为就很有必要了。为了做到这一点，你只需要设置 collapsable
为 false 即可：

<View collapsable={false}>
...
</View>

4

组件

iOS 活动指示器

Props

Edit on GitHub

animating bool 型

显示指示器(true，默认的)还是隐藏它(false)。

color 字符串型

Spinner 的前景颜色(默认为灰色)。

size 枚举型(“小”，“大”)

指示器的大小。小的高度为 20，大的高度为 36。

例子

Edit on GitHub

'use strict';
var React = require('react-native');
var {
ActivityIndicatorIOS,
StyleSheet,
View,
} = React;
var TimerMixin = require('react-timer-mixin');
var ToggleAnimatingActivityIndicator = React.createClass({
mixins: [TimerMixin],
getInitialState: function() {
return {
animating: true,
};
},
setToggleTimeout: function() {
this.setTimeout(
() => {
this.setState({animating: !this.state.animating});
this.setToggleTimeout();
},
1200
);
},
componentDidMount: function() {
this.setToggleTimeout();
},
render: function() {
return (
<ActivityIndicatorIOS
animating={this.state.animating}
style={[styles.centering, {height: 80}]}
size="large"
/>
);
}
});
exports.framework = 'React';
exports.title = '<ActivityIndicatorIOS>';
exports.description = 'Animated loading indicators.';
exports.examples = [
{
title: 'Default (small, white)',
render: function() {
return (
<ActivityIndicatorIOS
style={[styles.centering, styles.gray, {height: 40}]}
color="white"
/>
);
}
},
{
title: 'Gray',
render: function() {
return (
<View>
<ActivityIndicatorIOS
style={[styles.centering, {height: 40}]}
/>
<ActivityIndicatorIOS
style={[styles.centering, {backgroundColor: '#eeeeee', height: 40}]}
/>
</View>
);
}
},
{
title: 'Custom colors',
render: function() {
return (
<View style={styles.horizontal}>
<ActivityIndicatorIOS color="#0000ff" />
<ActivityIndicatorIOS color="#aa00aa" />
<ActivityIndicatorIOS color="#aa3300" />
<ActivityIndicatorIOS color="#00aa00" />
</View>
);
}
},
{
title: 'Large',
render: function() {
return (
<ActivityIndicatorIOS
style={[styles.centering, styles.gray, {height: 80}]}
color="white"
size="large"
/>
);
}
},
{
title: 'Large, custom colors',
render: function() {
return (
<View style={styles.horizontal}>
<ActivityIndicatorIOS
size="large"
color="#0000ff"
/>
<ActivityIndicatorIOS
size="large"
color="#aa00aa"
/>
<ActivityIndicatorIOS
size="large"
color="#aa3300"
/>
<ActivityIndicatorIOS
size="large"
color="#00aa00"
/>
</View>
);
}
},
{
title: 'Start/stop',
render: function(): ReactElement {
return <ToggleAnimatingActivityIndicator />;
}
},
];
var styles = StyleSheet.create({
centering: {
alignItems: 'center',
justifyContent: 'center',
},
gray: {
backgroundColor: '#cccccc',
},
horizontal: {
flexDirection: 'row',
justifyContent: 'space-around',
},
});

iOS 日期选择器

使用 DatePickerIOS
来在 iOS 上呈现一个日期/时间选择器(selector)。这是一个控制组件，所以为了组件更新，你必须钩在 onDateChange
回调中，并更新 date
支持，否则用户的变化将立即恢复以反映 props.date
。

Props

Edit on GitHub

date 日期型

当前选中的日期。

maximumDate 日期型

最大的日期。

限制可能的日期/时间值的范围。

minimumDate 日期型

最小的日期。

限制了可能的日期/时间值的范围。

minuteInterval 枚举型(1,2,3,4,5,6,10,12,15,20,30)

可选择的分钟的间隔。

mode 枚举型(“date”,“time”,“datetime”)

日期选择器模式。

onDateChange 函数型

日期变更处理程序。

当用户更改了 UI 的日期或时间时，它就会被调用。第一个也是唯一一个参数是一个 Date 对象，代表了新的日期和时间。

timeZoneOffsetInMinutes 数字型

在几分钟内时区偏移。

默认情况下，日期选择器将使用设备的时区。有了这个参数，才有可能迫使某个时区偏移。例如，为了显示太平洋的标准时间，传递 -7 * 60。

例子

Edit on GitHub

'use strict';
var React = require('react-native');
var {
DatePickerIOS,
StyleSheet,
Text,
TextInput,
View,
} = React;
var DatePickerExample = React.createClass({
getDefaultProps: function () {
return {
date: new Date(),
timeZoneOffsetInHours: (-1) * (new Date()).getTimezoneOffset() / 60,
};
},
getInitialState: function() {
return {
date: this.props.date,
timeZoneOffsetInHours: this.props.timeZoneOffsetInHours,
};
},
onDateChange: function(date) {
this.setState({date: date});
},
onTimezoneChange: function(event) {
var offset = parseInt(event.nativeEvent.text, 10);
if (isNaN(offset)) {
return;
}
this.setState({timeZoneOffsetInHours: offset});
},
render: function() {
// Ideally, the timezone input would be a picker rather than a
// text input, but we don't have any pickers yet :(
return (
<View>
<WithLabel label="Value:">
<Text>{
this.state.date.toLocaleDateString() +
' ' +
this.state.date.toLocaleTimeString()
}</Text>
</WithLabel>
<WithLabel label="Timezone:">
<TextInput
onChange={this.onTimezoneChange}
style={styles.textinput}
value={this.state.timeZoneOffsetInHours.toString()}
/>
<Text> hours from UTC</Text>
</WithLabel>
<Heading label="Date + time picker" />
<DatePickerIOS
date={this.state.date}
mode="datetime"
timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
onDateChange={this.onDateChange}
/>
<Heading label="Date picker" />
<DatePickerIOS
date={this.state.date}
mode="date"
timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
onDateChange={this.onDateChange}
/>
<Heading label="Time picker, 10-minute interval" />
<DatePickerIOS
date={this.state.date}
mode="time"
timeZoneOffsetInMinutes={this.state.timeZoneOffsetInHours * 60}
onDateChange={this.onDateChange}
minuteInterval={10}
/>
</View>
);
},
});
var WithLabel = React.createClass({
render: function() {
return (
<View style={styles.labelContainer}>
<View style={styles.labelView}>
<Text style={styles.label}>
{this.props.label}
</Text>
</View>
{this.props.children}
</View>
);
}
});
var Heading = React.createClass({
render: function() {
return (
<View style={styles.headingContainer}>
<Text style={styles.heading}>
{this.props.label}
</Text>
</View>
);
}
});
exports.title = '<DatePickerIOS>';
exports.description = 'Select dates and times using the native UIDatePicker.';
exports.examples = [
{
title: '<DatePickerIOS>',
render: function(): ReactElement {
return <DatePickerExample />;
},
}];
var styles = StyleSheet.create({
textinput: {
height: 26,
width: 50,
borderWidth: 0.5,
borderColor: '#0f0f0f',
padding: 4,
fontSize: 13,
},
labelContainer: {
flexDirection: 'row',
alignItems: 'center',
marginVertical: 2,
},
labelView: {
marginRight: 10,
paddingVertical: 2,
},
label: {
fontWeight: '500',
},
headingContainer: {
padding: 4,
backgroundColor: '#f6f7f8',
},
heading: {
fontWeight: '500',
fontSize: 14,
},
});

DrawerLayoutAndroid

React 组件封装平台 DrawerLayout
（仅适用于Android）。Drawer（通常用于导航）呈现 renderNavigationView
渲染导航视图和直接子级，是呈现（您的内容）的主要视图。导航视图是最初在屏幕上不可见的，但可以从由 drawerPosition
指定的窗口的侧面拉出，其宽度可通过 drawerWidth
设置。

例如：

render
:
function
(
)

{

var navigationView
=

(


<
Text style
=
{
{
margin
:

10
, fontSize
:

15
, textAlign
:

'left'
}
}
>
I
'm in the
Drawer!</Text
);
return (
<DrawerLayoutAndroid
drawerWidth={300}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() =navigationView}
<Text style={{10, fontSize: 15, textAlign: '
right
'}}>Hello</Text>
<Text style={{10, fontSize: 15, textAlign: '
right
'}}>World!</Text>
</DrawerLayoutAndroid>
);
},
```
 
### 属性
 
 
**drawerPosition** enum(DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right)
 
指定 drawer 将从屏幕的一侧滑动。
 
**drawerWidth** number
 
指定 drawer 的宽度，即从窗口的边缘拉到视图更精确的宽度。
**keyboardDismissMode** enum('
none
', "on-drag")
 
确定键盘是否响应拖动被驳回。
-'
none
' (默认值), 拖动不影响键盘。
-'
on
-
drag
', 拖动开始，键盘被驳回。
 
**onDrawerClose** 函数
 
导航视图关闭时调用函数。
 
**onDrawerOpen** 函数
 
导航视图打开时调用函数。
 
**onDrawerSlide** 函数
 
与导航视图交互时调用函数。
 
**onDrawerStateChanged** 函数
 
当 Drawer 状态发生变化时调用函数，drawer 有 3 种状态:
- idle, 表示与导航视图没有交互
- dragging,表示目前有与导航视图的交互
- settling, 表示有与导航视图的交互，并且导航视图正在的关闭或打开。
 
**renderNavigationView** 函数
 
导航图将被渲染到屏幕的一侧，并且可以拉出。
 
 
 
 
## 图片
 
 
一个 react 的组件用以显示不同类型的图片，包括网络图片，静态资源，临时的本地图片，还有本地磁盘的图片，比如手机照片。
 
举例：
 
```java
renderImages: function() {
return (
<View>
<Image
style={styles.icon}
source={require('
image
!
myIcon
')}
/>
<Image
style={styles.logo}
source={{uri: '
http
:
//facebook.github.io/react/img/logo_og.png'}}


/>


</
View
>


)
;

}
,

支撑工具

onLayout 函数
在进行装载和布局改变的时候使用{nativeEvent: {layout: {x, y, width, height}}}
调用。

resizeMode 枚举 ('cover', 'contain', 'stretch')
当帧与原始图像尺寸不匹配时用于确定如何调整图像的大小。

source {uri: string}，编号 uri
是一个代表图片资源标识符的字符串，它可以是 http 地址、 本地文件路径或静态图像资源的名称 (它被包含在 require('image!name')
函数中) 。

style 样式
Flexbox......
Transforms...
resizeMode Object.keys(ImageResizeMode)
backgroundColor 字符串
borderColor 字符串
borderWidth 数字
borderRadius 数字
overflow 枚举('visible', 'hidden')
tintColor 字符串
opacity 数字

testID 字符串 一个在 UI 自动测试脚本中使用此元素的唯一标识符。

ios
accessibilityLabel 字符串

在用户与图像交互时，该文本会由屏幕阅读器读取。

ios
accessible 布尔值
当为 true 的时候，指示图像是可访问的元素。

ios
capInsets {top: number, left: number, bottom: number, right: number}
当图像的大小被重新调整时，由 capInsets 指定的角落的大小将保持在一个固定的值，但中心内容和图像的边界将被拉伸。这用于创建可调整大小的圆形按钮、 阴影和其他可调整大小的资源。更多关于苹果的文档请点击此处。

ios
defaultSource {uri: string}
在下载最终图像并且网络断开的时候用来显示的静态图像。

ios
onError 函数
在加载错误的时候使用 {nativeEvent: {error}}
进行调用。

ios
onLoadEndr 函数
当完全加载成功时进行调用。

ios
onLoadEnd 函数
不管加载成功还是失败都会调用。

ios
onLoadStart 函数
加载成功的时候调用。

ios
onProgress 函数
在下载进程中使用 {nativeEvent: {loaded, total}}
进行调用。

描述

静态资源

在项目的进程中，添加并且移除和处理那些在应用程序不是经常使用的图片是很常见的情况。为了处理这种情况，我们需要找到一个方法来静态地定位那些被用在应用程序里的图片。因此，我们使用了一个标记器。唯一允许的指向 bundle 里的图片的方法就是在源文件中遍历地搜索 require('image!name-of-the-asset')
。

// GOOD

<
Image source
=
{
require
(
'image!my-icon'
)
}

/>

 
// BAD

var
icon
=

this
.
props
.
active

?

'my-icon-active'

:

'my-icon-inactive'
;

<
Image source
=
{
require
(
'image!'

+
icon
)
}

/>

 
// GOOD

var
icon
=

this
.
props
.
active

?
require
(
'image!my-icon-active'
)

:
require
(
'image!my-icon-inactive'
)
;

<
Image source
=
{
icon
}

/>

当主要的代码执行到这里，你就可以做一些有趣的事情，比如自动将那些用于应用程序的 assets 打包。注意，这些代码不是强制实施的，但不代表将来也不会。

使用 Images.xcassets 将静态资源添加到你的 iOS 应用程序中

NOTE: 生成应用程序所需的新资源

无论在什么时候，您想把新的资源添加到 Images.xcassets
中，您都需要在使用它之前通过 Xcode 来重新构建您的应用程序 — — 仅在模拟器内重新加载它是不够的。

这一进程正在被改进，不久就会提供更好的工作流程。

将静态资源添加到您的 Android 应用程序中

将您的图像作为位图画板添加到 android 项目中（<yourapp>/android/app/src/main/res
）。 为了给您的 assets 文件提供不同的分辨率，使用 配置限定符进行检查。 通常情况下，您将想要把您的 assets 文件放在下列目录 (如果它们不存在，那么在 res
下创建它们)：

• drawable-mdpi
  (1x)
• drawable-hdpi
  (1.5x)
• drawable-xhdpi
  (2x)
• drawable-xxhdpi
  (3x)

如果您的 asset 文件丢失了一种分辨率，那么 Android 将采取下一个最好的分辨率并且为您调整它的大小。

NOTE: 生成应用程序所需的新资源

无论在什么时候您把新的资源添加到您的画板中您都需要在使用它之前通过运行 react-native run-android
重新构建您的应用程序 - 仅重新加载 JS 是不够的。

这一进程正在被改进，不久就会提供更好的工作流程。

网络资源

在您进行编译的时候，许多您的应用程序中需要展示的图片都不能使用，或者你会想要通过加载一些动态图片来保持二进制大小在较低的状态。不像静态资源那样，您将需要手动指定图像的尺寸。

// GOOD

<
Image source
=
{
{
uri
:

'https://facebook.github.io/react/img/logo_og.png'
}
}

style
=
{
{
width
:

400
,
height
:

400
}
}

/>

 
// BAD

<
Image source
=
{
{
uri
:

'https://facebook.github.io/react/img/logo_og.png'
}
}

/>

本地文件系统资源

请在 CameraRoll 中查看使用 Images.xcassets
之外的本地资源示例 。

最好的相片册图片

iOS 的相片册可以让你将同一张图片保存为不同的尺寸，对于选择那张接近你想要尺寸的图片来说，这很重要。你不会想用一张 3264x2448 分辨率的图片作为资源来显示一个 200x200 的缩略图。如果确实有符合你要求的尺寸， React Native 会自动选择它，否则它会使用第一张比特定尺寸大 50% 的图片来避免重新定义尺寸时带来的模糊失真。这些工作 React Native 自动帮你完成了，所以你不必再自己编写乏味和容易出错的代码。

为什么不自动调整所有事物？

在浏览器中 如果你不给一个图像规定大小，那么浏览器会呈现一个 0x0 的元素、 随后下载图像，然后再以正确的尺寸呈现图像。这种行为最大的问题是，您的 UI 会在正在加载的图像四周跳动，这会造成一个非常糟糕的用户体验。

在 React Native 中故意不实施该行为。它的目的是让开发人员可以提前知道远程图像的尺寸 (或图形比例)，我们认为这样做的话可以实现更好的用户体验。通过使用 require('image!x')
语法从应用程序包中加载的静态图片可以自动的调整大小，因为它们的尺寸在安装时立即可用。

例如，上述使用 'require('image!logo')' 屏幕截图的结果：

{
"__packager_asset"
:
true
,
"isStatic"
:
true
,
"path"
:
"/Users/react/HelloWorld/iOS/Images.xcassets/react.imageset/logo.png"
,
"uri"
:
"logo"
,
"width"
:
591
,
"height"
:
573
}

Source 是一个对象类型

在 React Native 中，一个有趣的决定是 src
特性将会被命名为 source
，并且不作为一个字符串而是一个 uri
特性的对象类型。

<
Image source
=
{
{
uri
:

'something.jpg'
}
}

/>

站在底层来看，这样做的原因是它允许将元数据依附到这个对象中。举个例子，你正在使用 require('image!icon')
，我们将添加 isStatic
作为一个 flag 来标识本地文件（不要依赖这例子，将来这可能会改变！）。这在将来同时也会成为可能，比如我们可能会支持子画面，并用它来取代输出 {uri: ...}
，我们可以输出 {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}}
同时支持在所有已经存在的网站中透明地显示子画面。

在用户角度上，这会让你用有用的特性比如图片的几何尺寸来注释对象类型，从而计算出将要显示出来的尺寸。尽情地使用这种数据类型来储存你的图片吧。

背景图片叠加

一个对于 web 开发者们很常见的需求是 background-image
。这种情况下，创建一个简单的 <Image>
组件然后将它作为子 layer 添加到你想要添加的 layer 上面。

return

(


<
Image source
=
{
...
}
>


<
Text
>
Inside
</
Text
>


</
Image
>

)
;

非主线程加载

图片的解析会花费很多的时间。这是导致网页的帧数下降的其中一个重要的原因，因为解析工作会被执行在主线程中。在 React Native 中，图片的解析会在不同的线程中执行。在实际操作中，你已经处理好这种情况，当图片还没有下载完成，因此需要将 placeholder 显示出来，这不用你写任何代码。

举例

'use strict'
;

 
var React
=
require
(
'react-native'
)
;

var
{


Image
,

StyleSheet
,
Text,

View
,
ActivityIndicatorIOS
}

=
React
;

 
var ImageCapInsetsExample
=
require
(
'./ImageCapInsetsExample'
)
;

 
var NetworkImageExample
=
React.
createClass
(
{

watchID
:

(
null
:

?
number
)
,
 
getInitialState
:
function
(
)

{


return

{

error
:

false
,
loading
:

false
,
progress
:

0


}
;


}
,
render
:
function
(
)

{

var loader
=

this
.
state
.
loading

?


<
View
style
=
{
styles.
progress
}
>


<
Text
>
{
this
.
state
.
progress
}
%</
Text
>


<
ActivityIndicatorIOS style
=
{
{
marginLeft
:
5
}
}
/>


</
View
>

:

null
;


return

this
.
state
.
error

?


<
Text
>
{
this
.
state
.
error
}
</
Text
>

:


<
Image

source
=
{
this
.
props
.
source
}

style
=
{
[
styles.
base
,
{
overflow
:

'visible'
}
]
}

onLoadStart
=
{
(
e
)

=>

this
.
setState
(
{
loading
:

true
}
)
}

onError
=
{
(
e
)

=>

this
.
setState
(
{
error
:
e.
nativeEvent
.
error
, loading
:

false
}
)
}

onProgress
=
{
(
e
)

=>

this
.
setState
(
{
progress
:

Math
.
round
(
100

*
e.
nativeEvent
.
loaded

/
e.
nativeEvent
.
total
)
}
)
}

onLoad
=
{
(
)

=>

this
.
setState
(
{
loading
:

false
, error
:

false
}
)
}
>


{
loader
}


</
Image
>;


}

}
)
;

 
exports.
displayName

=

(
undefined
:

?
string
)
;

exports.
framework

=

'React'
;

exports.
title

=

'<Image>'
;

exports.
description

=

'Base component for displaying different types of images.'
;

 
exports.
examples

=

[


{

title
:

'Plain Network Image'
,
description
:

'If the `source` prop `uri` property is prefixed with '

+


'"http", then it will be downloaded from the network.'
,
render
:
function
(
)

{


return

(


<
Image

source
=
{
{
uri
:

'http://facebook.github.io/react/img/logo_og.png'
}
}

style
=
{
styles.
base
}


/>


)
;


}
,

}
,

{

title
:

'Plain Static Image'
,
description
:

'Static assets should be required by prefixing with `image!` '

+


'and are located in the app bundle.'
,
render
:
function
(
)

{


return

(


<
View
style
=
{
styles.
horizontal
}
>


<
Image
source
=
{
require
(
'image!uie_thumb_normal'
)
}
style
=
{
styles.
icon
}

/>


<
Image
source
=
{
require
(
'image!uie_thumb_selected'
)
}
style
=
{
styles.
icon
}

/>


<
Image
source
=
{
require
(
'image!uie_comment_normal'
)
}
style
=
{
styles.
icon
}

/>


<
Image
source
=
{
require
(
'image!uie_comment_highlighted'
)
}
style
=
{
styles.
icon
}

/>


</
View
>


)
;


}
,

}
,

{

title
:

'Error Handler'
,
render
:
function
(
)

{


return

(


<
NetworkImageExample source
=
{
{
uri
:

'http://TYPO_ERROR_facebook.github.io/react/img/logo_og.png'
}
}

/>


)
;


}
,
platform
:

'ios'
,

}
,

{

title
:

'Image Download Progress'
,
render
:
function
(
)

{


return

(


<
NetworkImageExample source
=
{
{
uri
:

'http://facebook.github.io/origami/public/images/blog-hero.jpg?r=1'
}
}
/>


)
;


}
,
platform
:

'ios'
,

}
,

{

title
:

'Border Color'
,
render
:
function
(
)

{


return

(


<
View
style
=
{
styles.
horizontal
}
>


<
Image

source
=
{
smallImage
}

style
=
{
[

styles.
base
,
styles.
background
,

{
borderWidth
:

3
, borderColor
:

'#f099f0'
}


]
}


/>


</
View
>


)
;


}
,
platform
:

'ios'
,

}
,

{

title
:

'Border Width'
,
render
:
function
(
)

{


return

(


<
View
style
=
{
styles.
horizontal
}
>


<
Image

source
=
{
smallImage
}

style
=
{
[

styles.
base
,
styles.
background
,

{
borderWidth
:

5
, borderColor
:

'#f099f0'
}


]
}


/>


</
View
>


)
;


}
,
platform
:

'ios'
,

}
,

{

title
:

'Border Radius'
,
render
:
function
(
)

{


return

(


<
View
style
=
{
styles.
horizontal
}
>


<
Image

style
=
{
[
styles.
base
,
{
borderRadius
:

5
}
]
}

source
=
{
fullImage
}


/>


<
Image

style
=
{
[
styles.
base
, styles.
leftMargin
,
{
borderRadius
:

19
}
]
}

source
=
{
fullImage
}


/>


</
View
>


)
;


}
,

}
,

{

title
:

'Background Color'
,
render
:
function
(
)

{


return

(


<
View
style
=
{
styles.
horizontal
}
>


<
Image
source
=
{
smallImage
}
style
=
{
styles.
base
}

/>


<
Image

style
=
{
[

styles.
base
,
styles.
leftMargin
,

{
backgroundColor
:

'rgba(0, 0, 100, 0.25)'
}


]
}

source
=
{
smallImage
}


/>


<
Image

style
=
{
[
styles.
base
, styles.
leftMargin
,
{
backgroundColor
:

'red'
}
]
}

source
=
{
smallImage
}


/>


<
Image

style
=
{
[
styles.
base
, styles.
leftMargin
,
{
backgroundColor
:

'black'
}
]
}

source
=
{
smallImage
}


/>


</
View
>


)
;


}
,

}
,

{

title
:

'Opacity'
,
render
:
function
(
)

{


return

(


<
View
style
=
{
styles.
horizontal
}
>


<
Image

style
=
{
[
styles.
base
,
{
opacity
:

1
}
]
}

source
=
{
fullImage
}


/>


<
Image

style
=
{
[
styles.
base
, styles.
leftMargin
,
{
opacity
:

0.8
}
]
}

source
=
{
fullImage
}


/>


<
Image

style
=
{
[
styles.
base
, styles.
leftMargin
,
{
opacity
:

0.6
}
]
}

source
=
{
fullImage
}


/>


<
Image

style
=
{
[
styles.
base
, styles.
leftMargin
,
{
opacity
:

0.4
}
]
}

source
=
{
fullImage
}


/>


<
Image

style
=
{
[
styles.
base
, styles.
leftMargin
,
{
opacity
:

0.2
}
]
}

source
=
{
fullImage
}


/>


<
Image

style
=
{
[
styles.
base
, styles.
leftMargin
,
{
opacity
:

0
}
]
}

source
=
{
fullImage
}


/>


</
View
>


)
;


}
,

}
,

{

title
:

'Nesting'
,
render
:
function
(
)

{


return

(


<
Image

style
=
{
{
width
:

60
, height
:

60
, backgroundColor
:

'transparent'
}
}

source
=
{
fullImage
}
>


<
Text style
=
{
styles.
nestedText
}
>

React

</
Text
>


</
Image
>


)
;


}
,

}
,

{

title
:

'Tint Color'
,
description
:

'The `tintColor` style prop changes all the non-alpha '

+


'pixels to the tint color.'
,
render
:
function
(
)

{


return

(


<
View
>


<
View
style
=
{
styles.
horizontal
}
>


<
Image

source
=
{
require
(
'image!uie_thumb_normal'
)
}

style
=
{
[
styles.
icon
,
{
borderRadius
:

5
, tintColor
:

'#5ac8fa'

}
]
}


/>


<
Image

source
=
{
require
(
'image!uie_thumb_normal'
)
}

style
=
{
[
styles.
icon
, styles.
leftMargin
,
{
borderRadius
:

5
, tintColor
:

'#4cd964'

}
]
}


/>


<
Image

source
=
{
require
(
'image!uie_thumb_normal'
)
}

style
=
{
[
styles.
icon
, styles.
leftMargin
,
{
borderRadius
:

5
, tintColor
:

'#ff2d55'

}
]
}


/>


<
Image

source
=
{
require
(
'image!uie_thumb_normal'
)
}

style
=
{
[
styles.
icon
, styles.
leftMargin
,
{
borderRadius
:

5
, tintColor
:

'#8e8e93'

}
]
}


/>


</
View
>


<
Text style
=
{
styles.
sectionText
}
>

It also works with downloaded images
:


</
Text
>


<
View
style
=
{
styles.
horizontal
}
>


<
Image

source
=
{
smallImage
}

style
=
{
[
styles.
base
,
{
borderRadius
:

5
, tintColor
:

'#5ac8fa'

}
]
}


/>


<
Image

source
=
{
smallImage
}

style
=
{
[
styles.
base
, styles.
leftMargin
,
{
borderRadius
:

5
, tintColor
:

'#4cd964'

}
]
}


/>


<
Image

source
=
{
smallImage
}

style
=
{
[
styles.
base
, styles.
leftMargin
,
{
borderRadius
:

5
, tintColor
:

'#ff2d55'

}
]
}


/>


<
Image

source
=
{
smallImage
}

style
=
{
[
styles.
base
, styles.
leftMargin
,
{
borderRadius
:

5
, tintColor
:

'#8e8e93'

}
]
}


/>


</
View
>


</
View
>


)
;


}
,

}
,

{

title
:

'Resize Mode'
,
description
:

'The `resizeMode` style prop controls how the image is '

+


'rendered within the frame.'
,
render
:
function
(
)

{


return

(


<
View
style
=
{
styles.
horizontal
}
>


<
View
>


<
Text style
=
{
[
styles.
resizeModeText
]
}
>

Contain

</
Text
>


<
Image

style
=
{
styles.
resizeMode
}

resizeMode
=
{
Image
.
resizeMode
.
contain
}

source
=
{
fullImage
}


/>


</
View
>


<
View
style
=
{
styles.
leftMargin
}
>


<
Text style
=
{
[
styles.
resizeModeText
]
}
>

Cover

</
Text
>


<
Image

style
=
{
styles.
resizeMode
}

resizeMode
=
{
Image
.
resizeMode
.
cover
}

source
=
{
fullImage
}


/>


</
View
>


<
View
style
=
{
styles.
leftMargin
}
>


<
Text style
=
{
[
styles.
resizeModeText
]
}
>

Stretch

</
Text
>


<
Image

style
=
{
styles.
resizeMode
}

resizeMode
=
{
Image
.
resizeMode
.
stretch
}

source
=
{
fullImage
}


/>


</
View
>


</
View
>


)
;


}
,

}
,

{

title
:

'Animated GIF'
,
render
:
function
(
)

{


return

(


<
Image

style
=
{
styles.
gif
}

source
=
{
{
uri
:

'http://38.media.tumblr.com/9e9bd08c6e2d10561dd1fb4197df4c4e/tumblr_mfqekpMktw1rn90umo1_500.gif'
}
}


/>


)
;


}
,
platform
:

'ios'
,

}
,

{

title
:

'Cap Insets'
,
description
:


'When the image is resized, the corners of the size specified '

+


'by capInsets will stay a fixed size, but the center content and '

+


'borders of the image will be stretched. This is useful for creating '

+


'resizable rounded buttons, shadows, and other resizable assets.'
,
render
:
function
(
)

{


return

<
ImageCapInsetsExample
/>;


}
,
platform
:

'ios'
,

}
,
]
;

 
var fullImage
=

{
uri
:

'http://facebook.github.io/react/img/logo_og.png'
}
;

var smallImage
=

{
uri
:

'http://facebook.github.io/react/img/logo_small_2x.png'
}
;

 
var styles
=

StyleSheet
.
create
(
{

base
:

{

width
:

38
,
height
:

38
,

}
,
progress
:

{

flex
:

1
,
alignItems
:

'center'
,
flexDirection
:

'row'
,
width
:

100


}
,
leftMargin
:

{

marginLeft
:

10
,

}
,
background
:

{

backgroundColor
:

'#222222'


}
,
sectionText
:

{

marginVertical
:

6
,

}
,
nestedText
:

{

marginLeft
:

12
,
marginTop
:

20
,
backgroundColor
:

'transparent'
,
color
:

'white'


}
,
resizeMode
:

{

width
:

90
,
height
:

60
,
borderWidth
:

0.5
,
borderColor
:

'black'


}
,
resizeModeText
:

{

fontSize
:

11
,
marginBottom
:

3
,

}
,
icon
:

{

width
:

15
,
height
:

15
,

}
,
horizontal
:

{

flexDirection
:

'row'
,

}
,
gif
:

{

flex
:

1
,
height
:

200
,

}
,
}
)
;