翻译 | 从 ReactJS 到 React-Native—二者的主要差别是什么？

华翔，Web前端开发工程师
著做权归做者全部，转载请联系做者得到受权。

React-Native已经诞生有两年左右了，自从适配了Android平台，能构建跨平台移动App开始，这套框架变得更有意思了。一些contributors甚至将其适配到Mac和Windows平台，听起来很是酷。

React-Native跟ReactJS很是类似，可是在开始尝试你第一个native app以前，也须要了解二者之间的一些差别。做为一个正在学习使用React-Native，并已经用它尝试构建过几个原生app的ReactJS web开发者，我将在本文给你们介绍我发现的两者之间的一些区别。

安装和打包

React-Native是一个框架，而ReactJS是用来构建站点的JavaScript库。当你用ReactJS开始一个新的项目，你或许须要选择一个相似Webpack的打包器，而后去指定你工程中所须要的打包模块。React-Native包含了你须要的全部东西，你几乎再也不须要其余东西了。当你开始一个新项目，你会发现一切都很简单——你能够只须要在命令行敲一行命令就好了——而后你就可以使用ES6, 某些ES7特性，甚至一些比较新的polyfills开始你的编码。

你须要安装Xcode (在iOS和Mac平台)或Android Studio（在Android平台）来运行你的app。你也能够选择将你的app运行在你想使用的平台的模拟器（simulator/emulator）上，也能够直接运行在你本身设备上。

DOM和Styles

React-Native不使用HTML来渲染App，可是提供了可代替它的相似组件。这些React-Native组件映射到渲染到App中的真正的原生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，但实际上不太同样。在刚使用的时候会比较容易混淆，你或许想知道如何像你在SASS中那样建立mixins，或者你想重写一些可重用的组件。然而你会发现React-Native并非为web元素而生，因此也不能这样使用styles。幸运的是，你或许能找到一些可代替的方案来知足你的须要。

尽管Flexbox已经诞生有很长一段时间了，可是我仍是没有大量的使用它，我不知道你是怎样的，主要是由于个人项目中须要在一些老旧浏览器中有比较好兼容性。对于React-Native，使用Flexbox构建响应式App是最好不过的选择了。虽然它跟CSS中的表现不太一致，可是你理解以后你会以为很方便。我推荐你阅读这篇文章来学习它：Understanding React Native flexbox layout。

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

动画和手势

再见吧CSS动画！在React-Native中你须要经过JavsScript以一种全新的方式让不一样的组件动起来。推荐的方式是使用React-Native提供的Animated API。能够类比于著名的JavaScript库Velocity.js。你能够经过它制做定时的或者基于手势的动画，也能跟不一样的Easing（缓动）结合使用。因此你能够作出各类你在web中实现的效果。React-Native也提供了LayoutAnimation这种十分简单友好实现渐变的API，不过目前只适配了iOS平台，Android平台支持的不是很好。

为了跟用户手势很好的交互，React-Native提供了相似JavaScript的touch事件 web API，叫作PanResponder。安装和使用后或许会感到有些麻烦，可是你最终会发现其实它并不复杂。PanResponder能用到组件中的View (或者Text、Image)上以启用这个View组件的触摸事件。PanResponder提供了一系列function来捕捉用户的触摸事件，例如onPanResponderGrant (touchstart), onPanResponderMove(touchmove) 或onPanResponderRelease (touchend)。经过这些function能够获得原生事件和手势状态信息，如全部的touch、位置以及滑动距离，速度和触摸中心等。

使用PanResponder的react-native-swipeout组件

在我看来，使用PanResponder最大的问题是当你用PanResponder嵌套views/components的时候，你须要决定哪个是受手势控制的。想了解更多关于动画和PanResponder，React-native Animated API with PanResponder这篇文章将会很是有用。

导航

当我构建第一个React-Native App的时候，我很想知道怎样在两个界面之间导航。我最开始作的是去搜索react-router的代替品，大多数React App使用这个著名的库来实现页面迁移。我发现一些相似功能的库，但我发现总有一些东西我不太喜欢：有的使用起来十分复杂，有的我对它的动画不太满意，有的并非我想要的自定义的方式，或者在iOS和Android平台表现不一致或不兼容。而后我很好奇导航究竟是怎么实现的，我发现了React-Native提供的Navigator组件。我其实应该从这里开始的，找react-router的代替品并非最好的选择。

经过Navigator在不一样页面迁移

大多数的移动App不会像web App那样有大量的不一样方向的页面迁移，尽管Navigator组件看起来会以为复杂，由于他提供了管理页面迁移所须要的全部东西。我认为你应该坚持使用Navigator组件，除非你开发了一个规模庞大的移动App，须要不少的页面，或者你惧怕在某些时候会混乱。你也能够看下NavigatorExperimental这个组件，但在我看来，它还不适用于生成环境。

平台特殊代码

设计一套代码适配多平台的App有时候很方便，可是不久你的代码就会看起来很混乱。我能够确定在现代浏览器里面写代码，而且想让其看起来在老旧浏览器里面“很美好”的时候也会有这种感觉，得在CSS和JavaScript中处处加一系列的判断条件。

当你构建了一个原生App的时候，了解iOS和Android用户界面和体验的不一样是很重要的，下面这篇文章解释的很好：Designing for both Android and iOS。

假定你能够控制App的界面和表现，你有两种选择：

• 你能够为你的app在不一样平台定义通用的设计，只要简单直观，而且不让不一样平台的用户迷惑
• 你能够为不一样的平台写不一样的代码，意味着你有不一样的DOM、样式甚至不一样的逻辑和动画，为了遵循不一样平台的设计规范

若是你选择第二种方案，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工具可使用，这在我看起来很方便。 在你改动不多样式的时候Hot Reloading很是有用。对于App中较大的逻辑改动，修改代码的时候我通常使用Live Reload来从新加载整个App。

React-Native 调试工具

用React-Native最好的是，你在ReactJS中使用的开发者工具，基本都能使用。Chrome Dev Tools能够清晰的看到网络请求（虽然你须要一些小技巧来查看请求），也能够显示代码中的console logs和debugger断点。你甚至能够直接使用Redux DevTools来查看Redux数据的state。可是跟Web开发中查看DOM的inspect尚未，原生的Inspector实在有些难用。

发布

若是你开发一个适配了iOS和Android平台的App，并将其发布到App Store或者Google Play以前，你须要知道Xcode和Android Studio是怎么工做的，这样才能保证没有什么纰漏。对于iOS，跟发布一个普通的原生App没什么区别，不过在Android上，在发布到Google Play以前你须要按照React说明注册你的APK。

若是你很怀念之前在web app和VCS中那样简单的敲一行命令就能对你的原生App部署更新，你能够尝试下用Code Push将你的代码部署到用户端，这样就不须要先申请，而后发布App到Store，再等待好久才能经过。Code Push在你须要作一些优化或者bug修复的时候很是有用，可是不建议用来更新整个的feature。

结束语

React-Native用起来十分顺手，我差很少已经使用了快一年，开发起App也十分迅速。你能够在iOS和Android上像ReactJS那样快速的实现复杂的UI。我以为从ReactJS到React-Native的学习曲线很平滑，假如你喜欢学习JavaScript框架，那就更简单了，这只是换一种方式使用React。

React-Native的社区很庞大，而且还在增加，这种技术也不会很快的消失，我推荐每个不想依赖Cordova建立移动App的web开发者尝试一下。你会喜欢上它的！

iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。

>> 沪江Web前端上海团队招聘【Web前端架构师】，有意者简历至：zhouyao@hujiang.com <<