与现有的应用程序集成
由于 React 并没有做出关于你其他的技术堆栈的假设——通常在 MVC 中简单的用 V 来表示——这很容易嵌入到现有 non-React Native 应用程序中。事实上，它与另外的最佳实践社区工具集成了，如 。
- gem install cocoapods
- brew install node
用 CocoaPods 安装 React Native
是 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 应用程序
有两块你需要设置：
根 JavaScript 文件，该文件将包含实际的 React Native 应用程序和其他组件
包装 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 styles = React.StyleSheet.create({
container: {
backgroundColor: 'red'
class SimpleApp ponent {
render() {
&View style={styles.container}&
&Text&This is a simple application.&/Text&
React.AppRegistry.registerComponent('SimpleApp', () =& SimpleApp);
SimpleApp 将是你的模块名称，这将在后面使用。
将容器视图添加到你的应用程序中
现在，你应该为 React Native 组件添加一个容器视图。在你的应用程序中它可以是任何的 UIView。
但是，为了使代码简洁，让我们把 UIView 归入子类。让我们把它命名为 ReactView。打开你的 Yourproject.xcworkspace，并创建一个新类 ReactView(你可以把它命名为任何你喜欢的名字：))。
// ReactView.h
#import &UIKit/UIKit.h&
@interface ReactView : UIView
在一个视图控制器中，想要管理这一视图，继续添加一个出口并将其连接：
// ViewController.m
@interface ViewController ()
@property (weak, nonatomic) IBOutlet ReactView *reactV
在这里我简单的禁用了 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.
启动开发服务器
在根目录，我们需要启动 React Native 开发服务器。
(JS_DIR=`pwd`/ReactC cd Pods/R 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 内部运行。
Live 也从模拟器重新加载工作！你已经得到了一个简单的完全封装在 Objective–C UIView 子类中的 React 组件。
所以，当 RCTRootView 初始化时，它会尝试从 React Native 开发服务器中下载，解析并运行包文件。这意味着你所需要做的就是为 RCTRootView 实现你自己的容器视图或视图控制器——RCTRootView 摄取了捆绑的 JS 并呈现出你的 React 组件。万岁!
你可以在查看一个示例应用程序的完整源代码。简单的入门基础我就忽略了，本教程是使用xcode运行代码。用到这个nodejs模块，可以减少一些在JSX中写样式的蛋痛感！
react native是提倡我们使用flexbox进行布局，虽然有点不一样，但由于其什么浮动，并且position也与PC出入太多了，因此布局还是乖乖用flexbox吧。
react native中有两个基本元素，&View&与&Text&相当于PC的div与span，一个用于布局，一个用于修饰！此外，它还有许多样式是不支持的，比如说不支持vertical-align，因此我们无法实现文本垂直居中（虽然也有招数，不过要计算），需要在外面套一个View。
flex-direction:
justify-content: space-
align-items:
background-color: #
width:100;
height:100;
text-align:
font-size: 20;
background-color: #a9ea00;
line-height: 60;
width:100;
height:100;
text-align:
background-color:
line-height: 100;
width:100;
height:100;
text-align:
background-color:
我们使用react-native-css 将它转换为JS文件
然后在主程序引入它
'use strict';
var React = require('react-native');
var styles = require('./style')
AppRegistry,
StyleSheet,
var AwesomeProject = React.createClass({
render: function() {
&View style={styles.parent}&
&Text style={styles.aaa}&
&Text style={styles.bbb} &
&Text style={styles.ccc} &
AppRegistry.registerComponent('AwesomeProject', () =& AwesomeProject);
效果如下：
下面是主菜，我们先来一个常见的左右布局。左边是主面板，右边是不定宽的边拦。容器要加上flex:1表明它是伸缩容器，我们是两栏布局，就需要
flex-direction:要占满空间，可以选用
justify-content: space-between/flex- 我们需要项目向上对齐,可以用 align-items: stretch/flex-start.接着右边栏，设置flex:1，它就占满剩余空间。注意，不能让主面板也使用flex:1，否则就左右两边等宽了！
flex-direction:
justify-content:space-
align-items:
background-color:
width:280;
height:100;
text-align:
background-color: #a9ea00;
text-align:
background-color: #31b0d0;
padding:10;
font-size:12;
line-height:20;
页面结构如下：
* 左右布局 by 司徒正美
'use strict';
var React = require('react-native');
var styles = require('./style')
AppRegistry,
StyleSheet,
var AwesomeProject = React.createClass({
render: function() {
&View style={styles.parent}&
&View style={styles.main}&
&Text style={styles.text}&
这是主面板{'\n'}
这是主面板{'\n'}
这是主面板{'\n'}
这是主面板{'\n'}
是固定宽的
&View style={styles.right}&
&Text style={styles.text}&
这是右边拦{'\n'}
AppRegistry.registerComponent('AwesomeProject', () =& AwesomeProject);
在react native中想换行比较怪异，由于没有br元素，那么我们需要在JS逻辑中将换行符注入进去！
看到警告没有，那是因为View是不支持color 与text-align样式的。react native与PC端的CSS是有很大差异的，不过往后，react native会不断添加对CSS的支持。
左中右布局
这个与上面的很相似，中间是定宽，左右是等宽的边栏，许多博客都是用这布局。
flex-direction:
justify-content:space-
align-items:
background-color: #
width:280;
height:300;
background-color: #a9ea00;
background-color: #31b0d0;
background-color: #5cb55c;
padding:10;
font-size:12;
line-height:20;
主程序如下：
* 左中右布局 by 司徒正美
'use strict';
var React = require('react-native');
var styles = require('./style')
AppRegistry,
StyleSheet,
var AwesomeProject = React.createClass({
render: function() {
&View style={styles.parent}&
&View style={styles.left}&
&Text style={styles.text}&
这是左边拦{'\n'}
&View style={styles.main}&
&Text style={styles.text}&
这是主面板{'\n'}
这是主面板{'\n'}
这是主面板{'\n'}
这是主面板{'\n'}
是固定宽的
&View style={styles.right}&
&Text style={styles.text}&
这是右边拦{'\n'}
AppRegistry.registerComponent('AwesomeProject', () =& AwesomeProject);
上中下布局
要求上面的总在上面，下面的总是贴着底。
flex-direction:
background-color: #
background-color: #EFDA5B;
height:40;
background-color: #31b0d0;
height:40;
background-color: #5cb55c;
padding:10;
font-size:12;
line-height:20;
主程序如下：
* 上中下by 司徒正美
'use strict';
var React = require('react-native');
var styles = require('./style')
AppRegistry,
StyleSheet,
var AwesomeProject = React.createClass({
render: function() {
&View style={styles.parent}&
&View style={styles.header}&
&Text style={styles.text}&
&View style={styles.main}&
&Text style={[styles.text,{color:'#000'}]}&
这是主面板{'\n'}
这是主面板{'\n'}
这是主面板{'\n'}
这是主面板{'\n'}
这是不定高的
&View style={styles.footer}&
&Text style={styles.text}&
AppRegistry.registerComponent('AwesomeProject', () =& AwesomeProject);
这种布局通常出现在新闻或公众号，但中间那部分内容会很多，这高度会放不下，但react native是不支持overflow:scroll，我们可以使用scrollView组件来处理。
我们改一下样式，添加b类名
font-weight:
主程序改成这样
* 上中下by 司徒正美
'use strict';
var React = require('react-native');
var styles = require('./style')
AppRegistry,
StyleSheet,
ScrollView,
var AwesomeProject = React.createClass({
render: function() {
var repeatArr = Array(100).join("1").split("")
&View style={styles.parent}&
&View style={styles.header}&
&Text style={styles.text}&
&ScrollView style={styles.main}&
repeatArr.map(function(el, index){
return &Text key={index} style={[styles.text,{color:'#000'}]}&
&Text style={styles.b}&{index}&/Text&
这是主面板{'\n'}
&/ScrollView&
&View style={styles.footer}&
&Text style={styles.text}&
AppRegistry.registerComponent('AwesomeProject', () =& AwesomeProject);
基本上，结果这两种布局就够用，如果你想用切换卡或表格，这有原生的组件可用！
本站专栏文章皆为原创，转载请注明出处（带有 前端乱炖 字样）和本文的显式链接()，本站和作者保留随时要求删除文章的权利！
赞了此文章！
这个工具好，可是我去npm install react-native-css
居然说我的react-native 版本太低，我的react-native-cli是昨天刚刚npm install react-native-cli下来的。
但我react-native --version居然是:0.1.7
（react-native-css要0.5以上。）有谁知道是什么原因吗？
赞了此文章！
WRITTEN BY
PUBLISHED IN
本专栏其他文章
浏览:4585赞:0
浏览:1657赞:0
浏览:713赞:0
浏览:1891赞:0
浏览:2659赞:0
浏览:4079赞:0&&等React Native开发android和ios客户端有什么优势和劣势？在开发android的过程中，感觉android的api设计兼职不敢恭维，离apache的人都差一大截，比如spring mvc框架的设计，或许是我习惯了spring的开发模式吧？所以想请教牛牛们React Native开发客户端有什么优劣？10个牛币所有回答列表(3)react 前段时间才刚发布安卓版本吧。。持观望态度。 &不明觉厉我觉得主要好处是多平台、小巧轻便、缩短开发周期吧等等等等等等等等完等完等相关问答最近浏览暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级暂无贡献等级扫描二维码关注最代码为好友"/>扫描二维码关注最代码为好友