用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的优势–那也是很容易的,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.@H_301_100@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的开发过程中获取愉快的感受。