ReactJS和React-Native的主要区别在哪里

React-Native已经存在了约2年，而且因为它能被Android使用让我们构建跨平台的移动app而成为真正有趣的框架。一些开发者还为构建适用于Mac和Windows的桌面应用程序量身打造了一些框架，这简直太酷了。

React-Native在某种程度上与ReactJS非常相似，但在开始第一个本机应用程序之前，您需要知道它们之间的差异。在本文中，我将介绍作为ReactJS网页开发人员在学习使用React-Native并用其构建一些原生app时，此时我遇到它们间的主要差别。

设置和绑定

React-Native是一个框架，其中ReactJS是可用于您的网站的JavaScript库。当你开始ReactJS的新项目时，你可能会选择像Webpack这样的绑定工具，尝试找出项目中需要绑定的模块。React-Native有你需要的一切，你很可能不再需要其他依赖。当你开始新项目时，你会注意到它很容易配置： 它非常快而且只需要在命令行工具中运行一行命令就可以开始项目了。您可以使用[ES6，一些ES7功能，甚至几个polyfill]（https://facebook.github.io/react-native/docs/javascript-environment.html）立即开始编码您的第一个原生app。

要运行应用程序，您需要在计算机上安装Xcode（适用于iOS版，Mac版）或Android Studio（适用于Android）。您可以决定在要使用的平台的模拟器/仿真器上运行，也可以直接在自己的设备上运行它。

DOM和样式

React-Native不使用HTML来渲染应用程序，而是提供以类似方式工作的替代组件。这些React-Native组件映射了在应用程序上呈现的实际的真正的原生iOS或Android UI组件。

提供的大多数组件可以被转换成类似HTML的东西，例如View组件类似于div标签，而Text组件类似于p标签。

import React, { Component } from 'react';
import { View, Text } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.intro}>Hello world!</Text>
      </View>
    );
  }
}

由于您的代码不会在HTML页面中呈现，这也意味着您将无法重用以前使用的ReactJS使用任何类型的HTML，SVG或Canvas的库。虽然您可能会找到React-Native的替代库，react.parts具有Native类别，您可以找到所需的内容。

要为您的React-Native组件设置样式，您必须在Javascript中创建样式表。它看似CSS,但却不是真正的CSS.这可能一开始会令人困惑，你可能会碰到一个问题，比如你想知道如何使用SASS来创建混合，或者如何覆盖要重用的组件的样式。然后你就会发现React-Native不是web元素所以不能够像那样设置样式。幸运地是，你很有可能找到可替代方案完成你所需。

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    content: {
        backgroundColor: '#fff',
        padding: 30,
    },
    button: {
        alignSelf: 'center',
        marginTop: 20,
        width: 100,
    },
});

React-Native的样式表示例

我不知道你，但即使Flexbox已经有一段时间了，我从来没有完全沉浸于其使用中，主要是因为我涉及的项目需要与旧版浏览器的向后兼容性。使用React-Native构建响应式程序，您没有比Flexbox更好的方法。这在最开始可能是棘手的，因为它不总是像CSS一样的行为，但一旦你有了基本的了解，你就会快速擅长。我建议您阅读本文以了解更多信息：了解React本机Flexbox布局。

动画和手势

再见CSS动画！使用React-Native，您将学到一种全新的方式，通过Javascript为应用程序的不同组件设置动画。动画化组件的推荐方法是使用React-Native提供的Animated API。您可以将其与著名的Javascript库Velocity.js进行比较。它允许创建不同类型的动画，定时或基于与手势相关联的速度，并且可以与不同类型的Easing使用 。总的来说，你可以在网上做任何类型的动画。React-Native还提供了LayoutAnimation ，它实际上非常酷，并且使用过渡渐变很简单，但在这一点上只适用于iOS，因为Android支持度不好。

要与用户手势进行交互，React-Native提供类似于称为PanResponder的Javascript touch事件Web API。让它启动运行很苦恼，但你终究会发现没有那么复杂。PanResponder需要应用于您的组件的View（或文本或图像）以启用此视图上的触摸处理程序。从那里，PanResponder提供了一个可用于捕获不同触摸事件的功能列表，例如 onPanResponderGrant（touchstart）或 onPanResponderMove（touchmove），又或是 onPanResponderRelease（touchend）。这些功能将允许您访问本机事件和手势状态，其中包含所有触摸及其位置以及累积距离，速度和触摸起点等信息。

使用PanResponder进行react-native-swipeout组件

在我看来，PanResponder的主要困难来自于您自己的PanResponder嵌套视图/组件，您需要决定哪一个必须被授予手势的控制权。要了解有关动画和PanResponder的更多信息，本文可能非常有用：React-native Animated API with PanResponder

导航

当我开始使用React-Native构建我的第一个移动应用程序时，我想知道如何在2个场景之间导航栏切换。我做的第一件事是搜索一个替代react-router，这个大多数React网络应用 程序用来在页面间转换的著名的库。我找到了几个库做类似的工作，但总是有一些一开始就不喜欢尝试的库：使用起来相当复杂，我对这个动画不满意，或者不能像我希望的那样自定义，又或是不能都兼容Android和iOS设备。然后，我开始想知道导航切换是如何工作的，我发现了React-Native提供的Navigator组件。我应该从这开始，寻找一个替代的react-router在我看来不是最好的做法。

导航之间的场景转换

大多数移动应用程序没有足够的场景，像做网络应用程序一样，导航器组件即使使用起来似乎有点复杂，将为您在管理场景之间转换提供你所需的一切。除非你建立一个非常大规模的移动应用程序，需要很多不同的场景，而且你害怕突然踩坑，我想你应该坚持使用Navigator。你也可以看看NavigatorExperimental，但在我认为，它还不适于应用于生产环境中。

平台特定代码

使用相同代码集设计多个平台的应用程序有时可能会压倒一切，您的代码很快就会开始看起来很丑陋。我确信你为现代浏览器写代码时遇到过类似的问题，而且需要在旧浏览器中看起来“不太糟糕”，在这里添加一些条件代码，在那里Javascript中甚至在Javascript 。

当您构建Native应用程序时，可能需要了解iOS和Android的用户界面和体验不同。本文对此解释得很好：设计Android和iOS 。

假设你可以控制你的应用程序的外观和行为，你有两个选择：

• 您可以为应用程序定义通用设计，使其在两个平台上看起来完全相同，只要它保持直观，并不会混淆平台用户。
• 您可以为每个平台定义代码集，这意味着您将拥有不同的DOM，样式表，甚至可能会有不同的逻辑和动画，以便遵循平台的UI和UX准则。

如果您决定使用第二点，React-Native可以检测您正在运行代码的平台，并为正确的平台加载正确的代码。我建议您将组件的主要逻辑定义在一个名为index.js的文件中，然后您将使用单个文件定义演示组件。对于iOS和Android，您将分别有index.ios.js和index.android.js文件。

如果按照我的建议组织文件夹结构，它将如下所示：

/src
  /components 
    /Button
      /components
        /Icon
          /index.android.js
          /index.ios.js      
        /Content
          /index.android.js
          /index.ios.js
      /index.js

如果你觉得拥有两个不同的文件是非常小的变化太多的开销，你可以使用具有条件语句的Platform模块。

开发者工具

当您启动新的本机项目时，您可以从React中获得几个开发人员工具，而无需安装任何内容，这在我看来非常棒。当您需要对应用程式的样式做小修改时，非常适合使用热加载。对于影响应用程序逻辑的更大更改，我通常更喜欢使用Live Reload，当您在代码中进行更改时，将完全重新加载您的应用程序。

React-Native调试工具

使用React-Native工作的好处是也可以共用ReactJs的大多数开发工具。Chrome开发工具精美地检查网络请求（尽管您需要添加一些小窍门来查看请求），显示控制台日志并在 debugger语句出现时停止运行代码。甚至可以使用伟大的Redux DevTools来检查Redux存储的状态。可是我最想要的一个功能是检查DOM，就像在网页上一样，本地检查器绝对没有那么好。

发布

如果您为iOS和Android开发应用程序，则需要了解Xcode和Android Studio的工作原理，以确保在App Store或Google Play上首次部署应用程序之前正确设置所有内容。对于iOS，它的工作原理就像您将部署常规的本地应用程序一样，尽管对于Android，您需要遵循React的建议才能将其上传到Google Play。

如果想要简单地键入单行命令来发布应用程序的更新的功能，正如通过Web应用程序和VCS正确设置，您可以使用非常棒的Code Push将代码直接给用户，无需存档，将您的应用程序发送到商店并等待它准备就绪。如果您想要进行一些改进或错误修复，代码推送是非常好的，但如果要添加全新功能，则不建议使用。

包装

我现在真的很喜欢使用React-Native。我使用它快一年了，能很快开发一个应用程序，准备好了！可以像使用ReactJS一样快速构建复杂的用户界面，通常对于iOS和Android都可以很好的使用。从ReactJS到React-Native的学习曲线我觉得很容易，特别是如果你喜欢学习新的Javascript框架，这只是使用React的另一种方法。

React-Native周边社区非常大，不断增长，技术不会很快消失，我一定会推荐任何想要创建移动应用程序的Web开发人员忘记Cordova并尝试一下React-Native。

祝你使用它玩得开心！

小手一抖，资料全有。长按二维码关注京程一灯，阅读更多技术文章和业界动态。