用React Native编写跨平台APP

Posted 2020-07-04 zhangjiaofa

用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.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的开发过程中获取愉快的感受。