React Native is great when you are starting a new mobile app from scratch. However, it also works well for adding a single view or user flow to existing native applications. With a few steps, you can add new React Native based features, screens, views, etc.
用React Native去开发一个全新的手机App是个很好的选择，并且React Native也可以和原生App整合。用几个步骤，你就可以将React
Native的基础特性，视图，窗体等控件加入到现有原生App中。
在iOS App中整合RN组件的关键点如下：
理解需要整合的React Native组件。
为所有需要整合的React Native组件创建带有subspecs的Podfile。
在Javascript中创建你的React Native组件。
增加一个新的事件句柄，该句柄用于创建一个RCTRootView，该RCTRootView用于指向你的React Native组件，事件句柄的AppRegistry名称需要在index.ios.js中定义。
启动React Native server，并运行原声应用。
选择性的增加更多的React Native组件。
准备发布（比如：运行脚本 react-native-xcode.sh）
九 正式发布
首先，按照把开发环境搞定，先让React Native在iOS上能跑起来。
CocoaPods&
是一个打包管理工具，支持MAC和iOS的开发。我们使用它用于在本地增加一个React
Native framework的代码到我们现有的工程中。
$ sudo gem install cocoapods
从技术上讲，不使用CocoaPods是可能的，但是这需要手动链接新增的静态库。
假设需要整合的APP是2048这个游戏。下面是一个
不包含React Native的原生应用的主菜单。
React Native 整合需要React和React Native节点模块。React Native Framework将提供代码以便于你的应用整合可以执行。
package.json
我们可以增加依赖package.json文件的包。如果这个包在你的工程的根目录不存在，则创建该文件。
通常在React Navie工程的根目录中，你将放入一些像package.json，index.ios.js这样的文件，并且在形如
ios／的子目录中增加仅在iOS上运行的原生代码，这些代码在本地运行。
下面是一个最简单的的package.json的例子。
版本号按照你的需要写入，通常用最新的React和React Native版本号。
& &name&: &NumberTileGame&,
& &version&: &0.0.1&,
& &private&: true,
& &scripts&: {
& & &start&: &node node_modules/react-native/local-cli/cli.js start&
& &dependencies&: {
& & &react&: &15.0.2&,
& & &react-native&: &0.26.1&
通过Node package manager安装React和React Native模块。Node模块需要被装到你的工程的根目录的node_modules/子路径中。
＃在包含package.json的工程中，安装模块至node_modules/文件夹
$ npm install
React Native Framework
按照上面的命令安装React Native Framework到你的工程中。我们将安装CocoaPods Podfile，其中携带你希望使用的组件。
在你整合React Native到你的应用之前，你需要决定那部分React Native Framework你希望去整合。这就是需要引入subspecs的地方。当你创建你的Podfile的时候，你需要指定使用并依赖哪些React
Native库，每个库将变成在Podfile中的一个subspec。
需要支持的subspecs列表可在中查看。他们大都按照功能命名。比如，我们一直要使用的Core
subspec。它可以提供AppRegistry，StyleSheet，View和其他核心React
Native库。如果你要增加React Native的Text库，即支持&Text&元素，这时你需要RCTText
subspec。如果你需要Image库，即支持&Image&元素，这时你需要RCTImage subspec。
在你使用Node去安装React和 React Native frameworks至node_modules路径之后，并且你已经决定你需要整合哪些React
Native元素，这时你需要准备去创建Podfile了，以便于你可以安装这些组件到你的应用中。
最简单的方法去创建一个Podfile是通过是在原生iOS代码路径中用CocoaPods的
init命令创建。
## In the directory where your native iOS code is located (e.g., where your `.xcodeproj` file is located)
$ pod init
Podfile将被创建和保存在iOS的当前工程路径（ios/）中，并且将包含一个样本文件设定，用于微调你的整合目的。最后，Podfile应该看起来像下面这样：
# The target name is most likely the name of your project.
target 'NumberTileGame' do
& # Your 'node_modules' directory is probably in the root of your project,
& # but if not, adjust the `:path` accordingly
& pod 'React', :path =& '../node_modules/react-native', :subspecs =& [
& & 'Core',
& & 'RCTText',
& & 'RCTWebSocket', # needed for debugging
& & # Add any other subspecs you want to use in your project
在你创建完毕Podfile后，你就可以准备安装React Native pod了。
$ pod install
你应该看到输出如下：
Analyzing dependencies
Fetching podspec for `React` from `../node_modules/react-native`
Downloading dependencies
Installing React (0.26.0)
Generating Pods project
Integrating client project
Sending stats
Pod installation complete! There are 3 dependencies from the Podfile and 1 total pod installed.
现在我们有一个基础包了，我们将实现修改原生应用，将React Native整合到应用中。对于我们的2048应用，我们将在React Native中增加一个&High
Score”屏幕。
React Native 组件
我们将写的第一段代码是用React Native写的新的&High Score”屏幕，这将被整合入你的应用。
创建index.ios.js文件
首先，创建一个空的index.ios.js文件。为了方便，我们将该文件置于工程根目录。index.ios.js是iOS的React
Native应用的起点，并且该文件是必须的。该文件可以是一个小文件，用于表示你的React Native组件或者应用需要哪些其它的文件，或者它可以包含所需的所有代码。
# In root of your project
$ touch index.ios.js
增加React Native代码
在你的ndex.ios.js文件中创建你的组件，这里的例子中，我们在&View&中添加&Text&组件。
'use strict';
import React from 'react';
& AppRegistry,
& StyleSheet,
} from 'react-native';
class RNHighScores ponent {
& render() {
& & var contents = this.props[&scores&].map(
& & & score =& &Text key={score.name}&{score.name}:{score.value}{&\n&}&/Text&
& & return (
& & & &View style={styles.container}&
& & & & &Text style={styles.highScoresTitle}&
& & & & & 2048 High Scores!
& & & & &/Text&
& & & & &Text style={styles.scores}&
& & & & & {contents}
& & & & &/Text&
& & & &/View&
const styles = StyleSheet.create({
& container: {
& & flex: 1,
& & justifyContent: 'center',
& & alignItems: 'center',
& & backgroundColor: '#FFFFFF',
& highScoresTitle: {
& & fontSize: 20,
& & textAlign: 'center',
& & margin: 10,
& scores: {
& & textAlign: 'center',
& & color: '#333333',
& & marginBottom: 5,
// Module name
AppRegistry.registerComponent('RNHighScores', () =& RNHighScores);
RNHighScores 是你使用React Native增加的一个视图模块名称。
关于RCTRootView
现在在index.ios.js中创建你的React Native组件，你需要添加组件至一个新建的或者是已存在的ViewController中。最简单的办法是任意创建一个事件路径到你的组件中，然后将这个组件加到ViewController中。下一步，我们将React
Native组件和一个在ViewController中的新建的原生视图绑定，该ViewController被命名为RCTRootView。
创建事件路径
You can add a new link on the main game menu to go to the &High Score& React Native page.
你可以在主游戏菜单中增加一个新链接便于跳转到&High Score&这个React Native页面。
我们将在菜单链接中增加一个事件句柄。在应用的ViewController中增加一个方法。这时，RCTRootView就开始起作用了。
当你建立一个React Native应用，你可以使用React Native打包器去创建index.ios.bundle，用于对接React
Native server。因此，我们需要通过NSURL让RCTRootView指向index.ios.bundle，并且将它和该模块绑定。&
处于便于调试的目的，我们要在时间句柄被唤醒时打log。然后，在本地的React Native代码中创建一个字符串，这些代码在index.ios.bundle文件中。
最后，创建主窗体RCTRootView。在写React Native组件代码的时候，注意我们是如何提供RNHighScores作为模块名的。
#import &RCTRootView.h&
initialProperties是保存一些初始化数据的，后续可以在代码中用this.props获取这些数据。
- (IBAction)highScoreButtonPressed:(id)sender {
& & NSLog(@&High Score Button Pressed&);
& & NSURL *jsCodeLocation = [NSURL
&& & & & & & & & & & & & & & URLWithString:@&http://localhost:8081/index.ios.bundle?platform=ios&];
& & RCTRootView *rootView =
& & & [[RCTRootView alloc] initWithBundleURL : jsCodeLocation
&& & & & & & & & & & & & & moduleName& & & & : @&RNHighScores&
&& & & & & & & & & & & & & initialProperties :
&& & & & & & & & & & & & & & @{
&& & & & & & & & & & & & & & & @&scores& : @[
&& & & & & & & & & & & & & & & & @{
&& & & & & & & & & & & & & & & & & @&name& : @&Alex&,
&& & & & & & & & & & & & & & & & & @&value&: @&42&
& & & & & & & & & & & & & & & & & },
&& & & & & & & & & & & & & & & & @{
&& & & & & & & & & & & & & & & & & @&name& : @&Joel&,
&& & & & & & & & & & & & & & & & & @&value&: @&10&
&& & & & & & & & & & & & & & & & }
&& & & & & & & & & & & & & & & ]
&& & & & & & & & & & & & & & }
&& & & & & & & & & & & & & launchOptions& & : nil];
& & UIViewController *vc = [[UIViewController alloc] init];
& & vc.view = rootV
& & [self presentViewController:vc animated:YES completion:nil];
注意RCTRootView的initWithURL会启动一个新的JSC（JavaScriptCore）虚拟机。保存资源和简化不同的RN窗体间的通信，你可以有很多RN窗体，这些窗体与单一JS执行时间相关。为此，可以用
创建一个桥，用于代替RCTRootView的initWithURL。
当你的应用要发布的时候，NSURL可以指向一个预打包文件，类似这样：
[[NSBundle mainBundle] URLForResource:@&main&
withExtension:@&jsbundle&];.&
你可以在node_modules/react-native/packager/路径中使用react-native-xcode.sh脚本去生产一个预打包文件。
连接主菜单中的新链接和新增加的事件句柄方法。
一个较为简便的方法是打开storyboard，右击新链接。选择类似Touch Up Inside事件，拖动到storyboard中，然后选择在列表中创建方法。
测试你的整合应用
你已经完成了所有步骤去整合RN和你的APP。现在我们开始用RN打包器去建立index.ios.bundle包，便于localhost的服务器去加载。
App的通信安全
Apple has blocked implicit cleartext HTTP resource loading. So we need to add the following our project's Info.plist (or equivalent) file.
Apple公司已经关闭了隐式明文HTTP资源加载的接口。因此，我们需要在Info.plist文件中增加下面这段内容。
&key&NSAppTransportSecurity&/key&
& & &key&NSExceptionDomains&/key&
& & &dict&
& & & & &key&localhost&/key&
& & & & &dict&
& & & & & & &key&NSTemporaryExceptionAllowsInsecureHTTPLoads&/key&
& & & & & & &true/&
& & & & &/dict&
& & &/dict&
运行 Packager
# From the root of your project, where the `node_modules` directory is located.
$ npm start
如果你使用Xcode或者其它代码编辑器，你可以像以往一样建立和运行你的原生iOS APP。或者，你可以用下面这种命令行来运行APP：
# From the root of your project
$ react-native run-ios
在我们的示例应用中，你可以看到&High Scores”的链接，然后当你点击链接的时候，RN组件将会被渲染。
原生应用的 home 视图:
React Native&的high score视图:
如果你在整合的时候遇到获取模块的问题，可以参考下面的链接：
你可以参考一下整合相关的源代码.
原文链接：
http://facebook.github.io/react-native/releases/0.33/docs/integration-with-existing-apps.html#subspecs
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：651次
排名：千里之外React Native 简单教程 - 技术翻译 - 开源中国社区
React Native 简单教程
【已翻译100%】
英文原文：
推荐于 2年前 (共 19 段, 翻译完成于 06-04)
参与翻译&(3人)&: ,
作为一个 JavaScript 开发者，我之前从来没想过用 JavaScript 很容易地写原生移动应用。当然，我们已经有了如 PhoneGap 等工具，但在原生应用中封装一个基于浏览器的应用还有许多需要改进的地方。
现在这一切都改变了—— Facebook 的 React 团队发布了 React Native。它不仅可以让我们使用 React 框架来使用原生移动组件创建应用程序，但它使一切成为了现实——这意味着我们在开发应用时不需要重新编译——这使得它非常容易地创建移动应用！我有幸预览了 React Native 的 beta 版本，从那开始它大规模成长了起来。
请注意，目前已经支持 iOS。因此你需要运行 OS X 上的 Xcode 来跟随本教程。
&翻译得不错哦！
如果你还没有过机会学习 React,&&来开始用用它吧.
要重点注意学习这个并不意味着我们可以写一次代码就能将这段代码用到每一个地方。尝试那样做会因为疯狂的抽象级别而陷入一场灾难。React Native 则让我们可以学习一次，到处编写。
如果你关注社交网络领域的话你会记得 FaceMash，正式这个应用开创了 Facebook。对于不关注这个领域的人，其实是11年前(哇塞) Mark Zuckerberg 创建了 FaceMash，它是一个你可以用来查看两个人之中谁更加热门的应用程序。每一个人都有一个能反映他们有多“热门”的分数值 (尽管不知道原来使用的是什么算法，不过那部电影（社交网络）显示&&曾被使用过) .
它全部的荣耀都在于此 -
让我们整个来过一遍吧 - 我们准备用 React Native 来重新创建 FaceMash。如果你觉得凭外貌来评价姑娘们不道德，你可以把图片变成你觉得能吸引人的其它事务(狗狗，代码块，等等，我不做评价)，随便。
&翻译得不错哦！
创建你的应用
如你所愿，你可以从&&clone 到初始的代码库。这不是必须的，不过为了不让你错过不同阶段代码的不同分支，你可以 clone 一份下来!
休斯顿，我们已经升空
如果你没有 clone 代码库，就需要设置基础项目. &React Native 可以让我们使用 react-native-cli&npm 包 CLI 快速开始一个项目。如果你还没有安装这个，可以快速运行命令：
npm&install&-g&react-native-cli
然后我们就可以开始了.
在终端里导航到一个文件夹并运行命令：
react-native&init&FaceMash
这样做能为我们准备好基础到应用程序，供我们挖掘和加入更多东西.
打开 XCode 并浏览到你创建了应用程序的目录里面. 你需要从这里打开 facemash.xcodeproj。
React Native 支持我们在 iOS 模拟器和实际的 iOS 设备上工作.
我将会在 iOS 模拟器上面进行开发，因为它运行更多快速的应用程序开发 - 当我们修改了JavaScript 时，可以按下 Command + R 组合建来刷新应用，或者我们也可以通过 developer 菜单(通过 Command + Control + Z 就能访问到)启用动态重新载入来变成超级懒人。我们设置可以在Chrome的开发者工具中调试我们的代码。
&翻译得不错哦！
& & 如果你希望使用你的 iOS 设备来开发你的应用程序，就需要让设备痛你的计算机处于同一个网络中。React 默认会在 localhost 找到 JavaScript，所以就需要你将它指向你的计算机.
& & 我们可以通过编辑 AppDelegate.m 文件，将 localhost 改成我们的本地 IP 来达成这个目的. 你可以通过按下 Alt 的同时点击 wireless 菜单 在 OS X 来找到这个东西.
现在就可以运行我们的应用程序了。应用程序会在你在 XCode 中选择的目标中打开. 当我们点击运行，同时会产生一个在我们应用程序目录中运行着 npm start 的终端线程. 如果你不希望通过 XCode 运行应用，确保你运行了 npm start。这将会创建一个在端口8081上的本地 web 服务器，它指向我们编译好的 JavaScript 代码，并且也会监视到我们保存代码的动作以进行重新编译。
我把应用程序运行在一个模拟的 iPhone6 之上, 屏幕是真实设备的50%那么大.
这就是了，我们有了一个空的 canvas，有好多空间活动啊!
&翻译得不错哦！
悄悄来看一看
让我来看看拿来渲染我们可以在上面的截屏中所看到的东西的代码. 打开 index.ios.js.
&*&Sample&React&Native&App
&*&/facebook/react-native
'use&strict';
var&React&=&require('react-native');
&&AppRegistry,
&&StyleSheet,
var&facemash&=&React.createClass({
&&render:&function()&{
&&&&return&(
&&&&&&&View&style={styles.container}&
&&&&&&&&&Text&style={styles.welcome}&
&&&&&&&&&&Welcome&to&React&Native!
&&&&&&&&&/Text&
&&&&&&&&&Text&style={styles.instructions}&
&&&&&&&&&&To&get&started,&edit&index.ios.js
&&&&&&&&&/Text&
&&&&&&&&&Text&style={styles.instructions}&
&&&&&&&&&&Press&Cmd+R&to&reload,{'\n'}
&&&&&&&&&&Cmd+Control+Z&for&dev&menu
&&&&&&&&&/Text&
&&&&&&&/View&
var&styles&=&StyleSheet.create({
&&container:&{
&&&&flex:&1,
&&&&justifyContent:&'center',
&&&&alignItems:&'center',
&&&&backgroundColor:&'#F5FCFF',
&&welcome:&{
&&&&fontSize:&20,
&&&&textAlign:&'center',
&&&&margin:&10,
&&instructions:&{
&&&&textAlign:&'center',
&&&&color:&'#333333',
&&&&marginBottom:&5,
AppRegistry.registerComponent('facemash',&()&=&&facemash);
你可以合上你惊讶的嘴了 - 是的，这就是我们拿来渲染我们的应用程序的全部东西。看起来熟悉，对不对?
React Native vs 浏览器
不是 React Native 的所有东西都能满足你在浏览器中使用React的用途. 不过，两者之间的区别是如此的微不足道，所以完全没有必要担心它们.
不使用诸如 div 活着 section 之类的块元素, 我们在React中使用的是View组件. 它会映射到原生的 iOS 组件 UIView.
所有的文本都必须被封装到 Text 组件里面。
没有样式表 - 你的所有的样式都是被写成 JavaScript 对象的。
我们没有必要担心浏览器的兼容性问题 - ES6 harmony 是在盒子之外受到支持的，flexbox也是如此。
&翻译得不错哦！
我们准备从清理 React 组件的样式表盒渲染函数开始。为了对 React Native 有一个理想的基本了解，我们将尝试使用尽可能多的不同组件。
让我们先从 TabBarIOS 组件开始. 你也许能认出 TabBar 组件来，它被用在诸如时钟和照片这样一些核心的iOS应用中。
var&React&=&require('react-native');
&&AppRegistry,
&&StyleSheet,
&&TabBarIOS
var&facemash&=&React.createClass({
&&getInitialState()&{
&&&&return&{
&&&&&&selectedTab:&'faceMash'
&&render:&function()&{
&&&&return&(
&&&&&&&TabBarIOS&
&&&&&&&&&TabBarIOS.Item
&&&&&&&&&&title="FaceMash"
&&&&&&&&&&icon={&require('image!facemash')&}
&&&&&&&&&&selected={&this.state.selectedTab&===&'faceMash'&}&
&&&&&&&&&&&View&style={&styles.pageView&}&
&&&&&&&&&&&&&Text&Face&Mash&/Text&
&&&&&&&&&&&/View&
&&&&&&&&&/TabBarIOS.Item&
&&&&&&&&&TabBarIOS.Item
&&&&&&&&&&title="Messages"
&&&&&&&&&&icon={&require('image!messages')&}
&&&&&&&&&&selected={&this.state.selectedTab&===&'messages'&}&
&&&&&&&&&&&View&style={&styles.pageView&}&
&&&&&&&&&&&&&Text&Messages&/Text&
&&&&&&&&&&&/View&
&&&&&&&&&/TabBarIOS.Item&
&&&&&&&&&TabBarIOS.Item
&&&&&&&&&&title="Settings"
&&&&&&&&&&icon={&require('image!settings')&}
&&&&&&&&&&selected={&this.state.selectedTab&===&'settings'&}&
&&&&&&&&&&&View&style={&styles.pageView&}&
&&&&&&&&&&&&&Text&Settings&/Text&
&&&&&&&&&&&/View&
&&&&&&&&&/TabBarIOS.Item&
&&&&&&&/TabBarIOS&
var&styles&=&StyleSheet.create({
&&pageView:&{
&&&&backgroundColor:&'#fff',
&&&&flex:&1
//&omitted&code
看看这个！你会注意到当前的文本覆在了状态条上面，我们稍后会修复这个问题。
TabBarIOS 组件对它的每一个子项都使用了 TabBarIOS.Item。我们将会有三个页面——分别是你给人们评级的页面，一个消息列表以及一个设置的页面。
TabBarIOS.Item 必须有一个子项。他将会是已经被选取的页面的内容(你可以发现我们会根据组件的状态来选择设置成true还是false)。
很明显，一个 TAB 条没有图标不会好看。有几个系统图标是你可以拿来用的，不过如果你用了他们的话，TAB 的文字也会发生变化，以与系统的图标配对. 所以我们会使用自己的图标。为了在 React Native 中引入本地的图片资源，你可以使用 require 后面带上图片的资源名称！
我使用的图标是可以免费拿来用的，来自于 &的&CC 3.0 许可.
&翻译得不错哦！
使用静态图片
为了向 React Native 添加静态图片，请打开 XCode。在 Project Navigator (左手边的第一个图标)中, 打开 Images.xcassets 。你所有的图片都在那儿。
这可以让我们将所有的资源保持在同一个名称下，这样可以针对每一个分辨率、甚至是设备的特定图片提供不同的图像资源。
图像必须遵循一个严格的命名约定。使用的资源名称(比如 messages 或者是&settings) 并在后面给它带上它应该适用来显示的分辨率。例如，我要为 iPhone6 构建一个应用程序，我会为此使用 @2x 分辨率。
一旦为你的图片进行了正确的命名，就可以将它拖入左手边的 Images.xcassets 中了。
然后你就可以在 React Native 中使用 require('image!assetname') 了！
&翻译得不错哦！
下一个逻辑步骤就是设置我们的主组件使得 Tab 之间的切换可用。我们可以通过设置用户点击它时的状态来做到。TabBarIOS.Item 让我们可以给它一个 onPress 属性，可以拿来检测用户何时按下了一个tab。
//&omitted&code
var&facemash&=&React.createClass({
&&getInitialState()&{
&&&&return&{
&&&&&&selectedTab:&'faceMash'
&&changeTab(tabName)&{
&&&&this.setState({
&&&&&&selectedTab:&tabName
&&render:&function()&{
&&&&return&(
&&&&&&&TabBarIOS&
&&&&&&&&&TabBarIOS.Item
&&&&&&&&&&title="FaceMash"
&&&&&&&&&&icon={&require('image!facemash')&}
&&&&&&&&&&onPress={&()&=&&this.changeTab('faceMash')&}
&&&&&&&&&&selected={&this.state.selectedTab&===&'faceMash'&}&
&&&&&&&&&&&View&style={&styles.pageView&}&
&&&&&&&&&&&&&Text&Face&Mash&/Text&
&&&&&&&&&&&/View&
&&&&&&&&&/TabBarIOS.Item&
&&&&&&&&&TabBarIOS.Item
&&&&&&&&&&title="Messages"
&&&&&&&&&&icon={&require('image!messages')&}
&&&&&&&&&&onPress={&()&=&&this.changeTab('messages')&}
&&&&&&&&&&selected={&this.state.selectedTab&===&'messages'&}&
&&&&&&&&&&&View&style={&styles.pageView&}&
&&&&&&&&&&&&&Text&Messages&/Text&
&&&&&&&&&&&/View&
&&&&&&&&&/TabBarIOS.Item&
&&&&&&&&&TabBarIOS.Item
&&&&&&&&&&title="Settings"
&&&&&&&&&&icon={&require('image!settings')&}
&&&&&&&&&&onPress={&()&=&&this.changeTab('settings')&}
&&&&&&&&&&selected={&this.state.selectedTab&===&'settings'&}&
&&&&&&&&&&&View&style={&styles.pageView&}&
&&&&&&&&&&&&&Text&Settings&/Text&
&&&&&&&&&&&/View&
&&&&&&&&&/TabBarIOS.Item&
&&&&&&&/TabBarIOS&
//&omitted&code
可以了！它是多么的简单. 通过在 iOS 模拟器中按下 Command+R 来刷新应用(或者如果你是在真实设备上开发，可以通过 XCode 来对它进行重新编译) 你就会看到现在我们可以进行按下 tab 的操作了，并且主屏幕的显示也发生了变化！
尽管我们还没有写太多的代码，但是已经见第一个步骤分支的代码 checkout 出来了，里面也包含了我们在这个 tab 上用上了的图标。
&翻译得不错哦！
让我们打分吧
让我们来实现 FaceMash 的 tab 界面吧。我们将会从一个端点那里使用获取来加载到数据。在步骤一的分支中，我已经在 rest/ 目录中包含进来了一个 config.yaml 文件，那是我们将会用来使用&&对端点进行模拟的。所有 endpoint/pictures 中的用户都会被从&&处随机的生成。
打开你的终端并且运行命令
stubby&-d&rest/config.yaml
接着我们就开始吧！
在名为 tabs/ 的目录中创建一个新文件，命名为&FaceMash.js，在里面放一个基础的 React 组件 -
'use&strict';
var&React&=&require('react-native');
&&StyleSheet,
var&facemashTab&=&React.createClass({
&&render:&function()&{
&&&&return&(
&&&&&&&View&style={&styles.container&}&
&&&&&&&&&Text&
&&&&&&&&&&FaceMash&tab!
&&&&&&&&&/Text&
&&&&&&&/View&
var&styles&=&StyleSheet.create({
&&container:&{
&&&&flex:&1,
&&&&backgroundColor:&'#fff'
module.exports&=&facemashT
目前我们能从这个Tab上得到全部就是一个里面有一些文字的基础的 View 组件。我们还可以为这个 View 弄一些基础的样式，这样可以确保它具有合适的高和宽。
我们会添加一个头部，纯粹是用于展示的目的.
//&omitted&code
var&facemashTab&=&React.createClass({
&&render:&function()&{
&&&&return&(
&&&&&&&View&style={&styles.container&}&
&&&&&&&&&View&style={&styles.header&}&
&&&&&&&&&/View&
&&&&&&&&&View&style={&styles.content&}&
&&&&&&&&&&&Text&
&&&&&&&&&&&&FaceMash&tab!
&&&&&&&&&&&/Text&
&&&&&&&&&/View&
&&&&&&&/View&
var&styles&=&StyleSheet.create({
&&container:&{
&&&&flex:&1,
&&&&backgroundColor:&'#fff'
&&header:&{
&&&&height:&40,
&&&&background:&'#ff0000'
module.exports&=&facemashT
& & & & &&&
现在我们会抱怨状态条的黑色很糟糕，不过不要担心，因为我们可以使用 StatusBarIOS 的 API 来对其进行修改。当 changeTabfunction 被调用时，我们可以检查看看当前的 tab 是不是 FaceMash 的 tab。如果是的话，我们将会把状态调的状态设置为1（白色），如果不是就设置为0(黑色).
&翻译得不错哦！
index.ios.js
//&omitted&code
&&AppRegistry,
&&StyleSheet,
&&TabBarIOS,
&&StatusBarIOS
var&facemash&=&React.createClass({
&&changeTab(tabName)&{
&&StatusBarIOS.setStyle(tabName&===&'faceMash'&?&1&:&0);
&&&&this.setState({
&&&&&&selectedTab:&tabName
//&omitted&code
刷新你就会看到一个白色的状态条 - 解决了!
我们现在可以访问端点来向我们的用户进行展示了。我们将会使用&它在 React Native 中默认是被包含了进来的。
//&omitted&code
var&facemashTab&=&React.createClass({
&&getInitialState:&function()&{
&&&&return&{
&&&&&&list:&[],
&&&&&&currentIndex:&0
&&componentWillMount:&function()&{
&&&&fetch('http://localhost:8882/rest/mash')
&&&&&&.then(res&=&&res.json())
&&&&&&.then(res&=&&this.setState({&list:&res&}));
&&render:&function()&{
&&&&return&(
//&omitted&code
请求会用返回的数据对我们的状态进行填充。因为初始的数据时一个空的数组，所以我们可以在 render 函数中进行检查，在他们等待的时候显示一个加载页面。
&&StyleSheet,
&&ActivityIndicatorIOS
var&facemashTab&=&React.createClass({
&&render:&function()&{
&&&&if&(!this.state.list.length)&{
&&&&&&contents&=&(
&&&&&&&&&View&style={&styles.loading&}&
&&&&&&&&&&&Text&style={&styles.loadingText&}&Loading&/Text&
&&&&&&&&&&&ActivityIndicatorIOS&/&
&&&&&&&&&/View&
&&&&}&else&{
&&&&&&contents&=&(
&&&&&&&&&View&style={&styles.content&}&
&&&&&&&&&&&Text&Loaded&/Text&
&&&&&&&&&/View&
&&&&return&(
&&&&&&&View&style={&styles.container&}&
&&&&&&&&&View&style={&styles.header&}&
&&&&&&&&&&&Text&style={&styles.headerText&}&FaceMash&/Text&
&&&&&&&&&/View&
&&&&&&&&{&contents&}
&&&&&&&/View&
var&styles&=&StyleSheet.create({
&&container:&{
&&&&flex:&1,
&&&&backgroundColor:&'#fff'
&&loading:&{
&&&&flex:&1,
&&&&backgroundColor:&'#fff',
&&&&justifyContent:&'center',
&&&&alignItems:&'center'
&&loadingText:&{
&&&&fontSize:&14,
&&&&marginBottom:&20
&&header:&{
&&&&height:&50,
&&&&backgroundColor:&'#760004',
&&&&paddingTop:&20,
&&&&alignItems:&'center'
&&headerText:&{
&&&&color:&'#fff',
&&&&fontSize:&20,
&&&&fontWeight:&'bold'
& & & & &&& &&&&
现在我们将对位于 this.state.list 的数据进行访问。我们也会在端点返回一个对象的数组时，得到位于状态中的数组的当前索引 - 每个对象都是用户可以进行评比的两个人.
因为要从两个人中选一个，两者都有同自身相关联的相同数据，我们将创建一个 React 组件来展示他们的数据。
//&omitted&code
var&Person&=&React.createClass({
&&render:&function()&{
&&&&var&person&=&this.props.
&&&&return&(
&&&&&&&View&style={&styles.person&}&
&&&&&&&&&Text&Person!&/Text&
&&&&&&&/View&
var&facemashTab&=&React.createClass({
&&getInitialState:&function()&{
&&&&return&{
&&&&&&list:&[],
&&&&&&currentIndex:&0
&&componentWillMount:&function()&{
&&&&fetch('http://localhost:8882/rest/mash')
&&&&&&.then(res&=&&res.json())
&&&&&&.then(res&=&&this.setState({&list:&res&}));
&&render:&function()&{
&&&&if&(!this.state.list.length)&{
&&&&&&contents&=&(
&&&&&&&&&View&style={&styles.loading&}&
&&&&&&&&&&&Text&style={&styles.loadingText&}&Loading&/Text&
&&&&&&&&&&&ActivityIndicatorIOS&/&
&&&&&&&&&/View&
&&&&}&else&{
&&&&&&var&{&list,&currentIndex&}&=&this.
&&&&&&var&record&=&list[currentIndex];
&&&&&&var&people&=&record.users.map(person&=&&&Person&person={&person&}&/&);
&&&&&&contents&=&(
&&&&&&&&&View&style={&styles.content&}&
&&&&&&&&&&{&people&}
&&&&&&&&&/View&
&&&&return&(
&&&&&&&View&style={&styles.container&}&
&&&&&&&&&View&style={&styles.header&}&
&&&&&&&&&&&Text&style={&styles.headerText&}&FaceMash&/Text&
&&&&&&&&&/View&
&&&&&&&&{&contents&}
&&&&&&&/View&
var&styles&=&StyleSheet.create({
&&person:&{
&&&&flex:&1,
&&&&margin:&10,
&&&&borderRadius:&3,
&&&&overflow:&'hidden'
我们现在就有了一个进行两次数据装入（每个人一次）的组件，合适的配置会向它进行传递。现在就可以将个人资料图片和相关的用户信息展示出来了。
&翻译得不错哦！
我们的翻译工作遵照 ，如果我们的工作有侵犯到您的权益，请及时联系我们
..react 跨平台啊，一次编写，多处编译.虽然现在还不成熟。
引用来自“厄煮”的评论..react 跨平台啊，一次编写，多处编译.虽然现在还不成熟。你这是开玩笑...react的目标是学习已辞，到处编写...
看命名你就知道了，都是iOS的控件，复用的可能性不大，除非现在的代码都改掉
天猫，淘宝用的
引用来自“1棵拼搏的寂静草”的评论天猫，淘宝用的用在什么产品上了，介绍介绍。
引用来自“1棵拼搏的寂静草”的评论天猫，淘宝用的引用来自“javadeveloper”的评论用在什么产品上了，介绍介绍。自己百度
有比较详细的介绍}