React Native预研报告

最新推荐文章于 2022-09-09 10:52:27 发布

giserdadao

最新推荐文章于 2022-09-09 10:52:27 发布

阅读量986

点赞数 1

分类专栏： RN 文章标签： native

本文链接：https://blog.csdn.net/giserdadao/article/details/52217134

版权

RN 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

React Native预研报告

技术概述

发展历程

2014年在faceBook开发者大会上开源了react Native,这种技术是众多hybrib APP开发中的一种框架,强调了write one time,run anywhere的混合开发的另外一种可能性，受到了很多前端开发者的关注，react Native即拥有native 开发中使用与原生交互，性能体验的质量等各种优势，同时也通过JS这一语言基础较为广泛的编程语言来做开发，降低入门门槛，大量的与原生类似的核心组件方便开发者更加方便的使用。同时在2015年的9月份faceBook支持了react Native在安卓平台上的支持，获得了更加多APP开发者的青睐。
当然通过一个平台的编写来实现多个平台的运行只是众多混合开发的共有特征，但是react native的热更新方式使得不用在等待发布用户才能享受到最新的APP功能，而是实时的体验APP的最新版本，也大幅度的缩短了开发，发布的周期（作为一名iOS开发者对于苹果的审核周期是深恶痛绝），这对于安卓和苹果的原生开发是非常明显的。同时react Native拥有更好的性能体验，可以接近甚至达到原生APP的性能体验，这是其它混合开发框架所不能真正达到的。
截止目前，虽然react Native只有两年的开源时间，但是faceBook已经利用这种框架开发自家的一些应用，对于后续的技术更新与支持，faceBook会一直对其改进，未来还是不错的。

技术优点

react Native较于许多混合开发框架以及原生的APP开发有众多的优点，由于笔者水平所限同时作为一名iOS开发者，就介绍一些个人想法，望指证。下面主要从iOS开发角度来做介绍

热更新

初次接触react Native就被热更新的概念所吸引，热更新就是版本更新时直接通过react Native的热更新平台即可实时的改变线上版本，而不用等待审核实时发布上线，这对于广大的iOS开发者就是最大的福音，这样也就意味着开发周期的缩短，开发成本的减少。

多平台支持

react Native作为一个混合开发框架，做到一个平台开发，安卓和苹果两个平台的支持这事最基本的，不过react Native拥有更友好，更加方便的组件，同时支持自定义原生组件在react Native下的使用。

性能体验更好

相较于大多数的混合开发的框架基本是基于webview来实现混合开发，相信大家对于webview与H5交互以及纯H5开发糟糕的用户体验已经有一些心得来，native框架的优势在这点上体现的很明显，众所周知native拥有更好的用户体验，而我们的react Native则也继承了native的优势，react Native则通过使App可以达到每秒60帧（足够流畅），并且能有类似原生App的外观和手感。因此我们也尽可能地优化React Native去实现这一目标，使开发者能集中精力处理App的业务逻辑，而不用费心考虑性能。在性能体验上下了非常多的功夫，较于其他混合开发框架而言是更好的。

方便的功能模块化

react Native提供的核心组件如text,view,image让我们更加方便定制控件，官方则更加推荐我们多的使用自定义的组件来实现各种UI定制和功能，比如我们要做一个分享功能，我们通过自定义一个组件作为入口，其他组件只需要在外看import一下即可使用分享的功能，当然这似乎跟我们使用的第三方代码没有什么区别，但使用原生我们要考虑很多的封装性，同时会要考虑和其他类的耦合，有些或者要做farmwork。但是react Native则只需要把我们需要的自定义组件放入组件入口，则可以更加快速的实现功能模块化

学习门槛低

JS应该算是群众基础比较广泛的语言了，react Native采用ES6的标准，相信很多懂JS的前端开发人员可以很快的上手，降低了学习成本，同时如果iOS开发者也会从react Native也会从组件和API中看到OC的一些影子，门槛。

动画效果的支持

一个好的APP会通过一些好的动画来使用户体验更好，react Native也提供了用于全局的布局动画LayoutAnimation和用于创建更精细的交互控制的动画Animated，下面就通过官方的一则文档来看看动画实现的API的使用情况。

class Playground extends React.Component {
  constructor(props: any) {
    super(props);
    this.state = {
      bounceValue: new Animated.Value(0),
    };
  }
  render(): ReactElement {
    return (
      <Animated.Image                         // 可选的基本组件类型: Image, Text, View
        source={{uri: 'http://i.imgur.com/XMKOH81.jpg'}}
        style={{
          flex: 1,
          transform: [                        // `transform`是一个有序数组（动画按顺序执行）
            {scale: this.state.bounceValue},  // 将`bounceValue`赋值给 `scale`
          ]
        }}
      />
    );
  }
  componentDidMount() {
    this.state.bounceValue.setValue(1.5);     // 设置一个较大的初始值
    Animated.spring(                          // 可选的基本动画类型: spring, decay, timing
      this.state.bounceValue,                 // 将`bounceValue`值动画化
      {
        toValue: 0.8,                         // 将其值以动画的形式改到一个较小值
        friction: 1,                          // Bouncier spring
      }
    ).start();                                // 开始执行动画
  }
}

通过对基本组件的的scale,flex,transform等控制，start,end来管理动画，也能实现动画动态的监测相应，这对于开发者而言也是很不错的，故react Native提供了较为不错的动画实现方式，也拥有足够数量的API来做定制。

原生API调用的支持

react Native支持使用安卓和苹果的原生API的调用，也推荐开发者解决复杂问题是，通过原生API定制自定义组件来解决一些react Native比较麻烦的事情。

技术评估建议

总的来说react Native可以实现实现大部分APP的功能，也拥有不错的用户体验，同时相较于大部分混合开发框架也拥有较为明显的优势。但是我们如果在项目中使用这种技术也是有一些风险必须要提前知道的.

风险

1.react native应该能够解决大部分普通应用的UI问题，但无法解决文艺应用的用户体验问题。另外也无法解决除UI外的其它App开发的问题，现在很多App都需要使用wifi，蓝牙，nfc等各种设备API，调用第三方库和jni库，js和基于Cordova的框架无法完美解决这些问题，这是我们在使用ionic做完跨平台应用又重新使用android开发原生应用的原因。React Native能否大规模使用要看后面对Android的支持，单纯支持iOS意义不大，现在iOS上Hybrid App体验已经相当好，非专业人员基本感觉不到和原生App的差别，但Android上情况较复杂，特别是低端机和Android4.4以下版本，存在各种问题
2.react Native技术支持不是很好，作为一个新技术，特别对与安卓来说，出现一些问题，如果队内不能解决，网上的问题的解决方案恐怕很少，这就对我们解决问题要求更高，时间可能更长，也变相的增加了开发周期。
3.对于项目中使用一些如分享，推送等主流的第三方文件，对于react Native基本上不支持，如果没有想对应的react Native第三方框架来支持，我们只能自己来做一套，这也会延长开发周期.

报告总结

综上所述，react Native拥有react 多平台开发和native的性能体验的优势，这对于混合开发来说是较为不错的，同时热更新也提高了产品发布周期，缩减开发成本。但是也用于一些问题和风险，我们需要综合评估，个人目前推荐使用，在一些复杂功能上推荐使用原生和react Native混合开发的方式