用React Native编写跨平台APP

用React Native编写跨平台APP

React Native 是一个编写iOS与Android平台实时、原生组件渲染的应用程序的框架。它基于React，Facebook的JavaScript的库，为的是构建用户接口，而并不是以浏览器为目标，它是以手机平台为目的。

换句话说，假设你是一个web开发人员，你能够使用React Native去编写干净、高速的移动APP，而且能够体会到熟悉的框架和单个的JavaScript的代码库。

在这之前，我们已经听到用诸如Cordova或者是Titanium这些框架的APP开发的承诺，那么使用React Native去开发APP到底怎样呢？在这篇文章中，我们将会探索React Native是什么，以及它到底是怎样工作的。

然后。我们将会报道使用React Native去编写iOS以及Android的应用程序到底是怎样的。结尾，你讲会看到为什么说React Native是你的接下来的一个移动项目开发极其推荐的一个选择。

什么是React Native?

在我们准备重点介绍开发人员的经验之前，我们先来说明一下React Native是什么。以及稍微设计一下React Native是怎样工作的。

它不过React

React Native是一个为了编写用户交互接口的JavaScript的库。一般是用于web上。由Facebook开发。并于2013年开源。React已经见证了广泛的使用。React在领域内的使用相对来说是狭窄的，它只关注它自己。通过渲染你的应用程序的用户交互的接口。与一般的大型的MVC风格的库呈分庭抗礼的局面。

开发人员由于一系列的原因，对于React已经是趋之若鹜了。它是轻量级的，同一时候它提供了令人为之眼前一亮的行为。尤其是对于高速改变的数据。同一时候由于其自身的组件的结构，它鼓舞你去写更加具有模块化的，可复用的代码。

要不是移动端。React Native果真不过React。

这里是有一些区别：你应当使用一个View组件而不是一个Div组件，应当使用一个Image标签。而不是img标签，开发人员的绝大多数都是保持几乎相同同样的，当然了，假设具备一定的Objective-c或者是Java的语言知识。那就更好了。对于移动开发人员，会有诸如这些机警的考虑（我是否做了多机型的适配工作？我的触摸点是否已经设置了足够大？）然而，React Native将会感觉全然熟悉。而且是舒适的，当然这是就那些已经学会怎样在浏览器中用React做开发的开发人员而言。

它确实是React

首当其冲。让人对React Native产生惊艳的感觉的是React Native的的确确是Native的。其余的针对移动端的JavaScript引擎是打包你的JavaScript代码进入到一个优化过的WebView其中，或许这些WebView也实现了某些本地化的UI的行为的接口。比方说动画。可是归根到底。你依然写的是一个web app。

在React中，一个组件描写叙述了自己的特性；React为你处理渲染。

一个干净的抽象层将这两个函数隔绝开来。对于web端。为了渲染组件。React使用了标准的Html的标签。这个同样的抽象层，一般被理解为“Bridge”，能够使得React Native去触发iOS与Android上面的渲染的API，那就意味着，在iOS，你的React Native组件绘制真正的UI View。然而在Android上，它们将会绘制native View。

你将会写一些看上去比較糟糕，与标准的JavaScript、CSS、Html比較相像的代码。

并不是直接是向下编译成本地代码。React Native 拿到你的应用程序。使用宿主平台的JavaScript引擎执行它。同一时候不堵塞主UI主线程。这样，你将会得到原生的app的操作、动画、体验的效果，而不须要必须写成Objective-C或者Java形式的代码。其它的跨平台的app的开发的模式，比方说。Cordova或者是Titanium。绝对达不到与原生体验或者表现这样的高度一致的效果。

一个比較好的开发人员的体验

与标准的Android或者是iOS的开发相比，React Native提供了一种更加具有震撼效果的开发人员的体验，由于你的应用程序差点儿全部是基于JavaScript开发的，你将会获取到一系列的Web开发上面的优势，比方能够瞬间刷新你的应用程序去看到你的代码的改变。

与花费长时间等待构建一个传统的移动app相比。React Native感觉简直就是上天的馈赠。

处理多个平台

令人充满感激的是。React Native支持多个平台. React Native的绝大多数的API都是跨平台的, 所以你只须要编写一个React Native组件, 它将会无缝的工作于iOS与Android平台上。

Facebook宣传它们的Ad Manager 应用程序 87%代码在两个平台重用, 然而我写了一个flashcard 应用程序更是没有一点平台相关的代码。假设你确实希望用到一些平台相关的代码–由于iOS与Android的两个平台的不同的交互。比方。或者是你希望反复利用一个平台的API的优势–那也是很easy的，React Native支持你去指定特定的平台的版本号，对于每个组件而言，然后，你能够将他们集成到你的React Native版本号的应用程序中。

用React Native来进行开发

使用一个简单的JavaScript的代码库来进行写真正的iOS或者是Android的native 应用看上去是一件没有头脑的事情。

那么用React Native来进行工作到底是怎样的呢？

開始

去開始开发React Native的应用程序。除了React Native以外。还须要安装一些针对iOS以及Android平台的一般性的依赖的组件。

详细的可查询React Native的站点。

建立React Native是简单的，假设你已经安装了一个最新版的node了。那么就能够使用npm install -g react-native-cli来安装React Native。

一旦你的这些依赖的组件已经安装，执行React Native 初始化项目的名称，将会自己主动生成一个React Native项目的模板。

一般性的React组件

一旦你的开发环境就绪, 是时候去写一些真正的应用程序。

正如之前提到的。React Native真的不过React，可是有几点不同。React Native组件对于浏览器而言，看上去更像是React组件。可是你的基本构建的块已经发生了变化，比方说相似Div、Img或者是p这样的标签。

React Native为你提供了主要的组件，比方Text或者是View，在以下的样例中，就用到了主要的组件ScrollView、TouchableHighliht与Text组件，全部的这些，将会映射到Android与iOS指定的View上面去。

利用它们创建一个滚动的View，伴随着合适的Touch处理是很直截了当的：



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>

);

},

});

假设你还没有处理好html与javascript的语法混乱的时候，看上去有些混乱，React强烈建议你使用JSX，对于React Native，你也是别无选择。你的渲染的装饰。是与javascript共同搭配来控制它的行为。这常常会遭到入门者的强烈的反对。

可是我强烈建议你给它一次机会。

由于React Native组件同React组件是很的相似，使得React转换为React Native也是很的简便。

样式表

为了使得绘制更加简单与有效, 同一时候鼓舞便于管理的样式风格, React Native 实现了严格的CSS的子集。

那就意味着你没有必要学习指定的平台的方式去设计你的View，可是这须要你花费一点时间去学习怎样使用React Native的样式。

最大的不同是你没有必要操心指定的规则。由于样式的继承是相当的精简的。而且React Native使用的内联的样式的语法。

以下是一个样式表在React Native是怎样被创建的样例：

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 30
  }
});

使用内联语法。这个样式是这样被使用的：

<View style={styles.container}>

...

</View>

開始移动端的开发

React Native一个更加复杂的地方是开发环境的搭建。 当使用React Native来进行开发的时候。你须要具备全部移动端开发的必备的工具，以及JavaScript的编辑的工具：一个文本编辑器，以及Chrome的调试的工具。

对于iOS，这意味着Xcode的打开，同一时候包括iOS的模拟器。对于Android，并不是是Android Studio。你将会使用命令行工具。终于，你将同一时候也须要React Native的包执行。你能够选择你的最喜欢的文本编辑器去使用去编辑你的JavaScript的代码。

这样的结果就是你须要有大量的工具在身边。有时候的确是感觉有太多的工具。桌面显的杂乱不堪，太多的桌面窗口打开的确是很烦人。还有一方面，至少React Native并没有替你隐藏标准的APP开发的进程。

转向本地代码

React Native通过提供JavaScript接口给已经存在的平台的API，这意味着你能够向一般的React代码那样进行书写。而且React Native “Bridge”将会负责繁重的转换工作，可是假设桥接不完好的时候回发生什么呢？

不可避免。用一个新的框架，比方React Native。将会有一些API会不被支持调用，在这样的情况下，能够书写本地代码，在宿主平台与JavaScript代码之间进行衔接沟通。

比方：

#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模块中去使用你的native 模块。包括它就像使用另外的一个Library一样：

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

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

你或许使用这个，当一个你须要的API不被支持，假设你希望将已经存在的oc代码或者是Java代码与React Native集成在一起，或者是你希望写一些高操作的函数去处理一些密集的图形处理。值得高兴的是，React Native给一个很弹性的编写代码的方式，当你须要的时候，使用native module，而且这样的方式是直截了当的。

即使你之前从未与oc或者是Java打过交道，书写桥接代码是一个很好的练习，在native移动app的开发过程中获取愉快的感受。