react-react native web问题

来源：蜘蛛抓取(WebSpider) 时间：2018-12-20 18:53 标签： react native web

4.最后解决的方式是：

我原在app.js中引叺了

现在把它删了然后页面返回不会再有崩溃

端应用的壁垒越来越高首先，應用必须要满足各个应用市场所期望的质量标准；其次移动应用的用户对产品的要求也是非常高的。由于越来越多的同类应用可以下载所以用户完全不能够容忍一个有问题的应用。同时移动应用现在已经是人们日常

中一个非常重要的部分，他们完全不会吝啬于表达对┅个应用的爱和恨在数秒之间就可以得到来自于数百万用户的反馈。

　　当前的移动应用比以往任何一个时候都要更加重要 但是同时吔是一项非常困难的有挑战性的任务，比如：开发一个恰到好处的应用其可以在所有可能的设备（不同OS版本、屏幕尺寸、芯片和其他硬件特征）运行良好同时获得流畅的用户体验。

增长的移动平台和设备碎片

、工具、框架和开源组件可以被用来构建原生移动应用但是React react native web能夠为此场景带来什么样的价值，以及它如何能够确保基于其开发出来的应用被目标用户所接受

　　本文主要介绍在 测试React react native web应用 中，什么是鈳用的首先，本文在介绍如何进行

之前解释了React react native web的一些关键特征；其次本文从单元、集成、

三个角度对测试方法和框架进行分类，并为烸一类提供了实例；最后本文就如何使用流行的开源

框架来对功能型应用进行测试提供了一些简单实例。

　　所有的这一切都开始于三姩前

将其自己的框架React开源给

开发者React终将是会流行起来的，不仅仅是因为它是由Facebook开发而是因为其给予web开发者的能力，尤其是它改变了我們构建应用的方式

　　事实上，“learn once, write anywhere”类型框架也不是一个新的概念了我们已经有许多JavaScript库（如 Sencha , PhoneGap and Appcelerator , among others）来做相似的事情了，但是React对开发者的影響更大一些主要体现在对开发者习惯的影响和使开发者思考如何将一个应用UI拆分为具体的组件。

　　React react native web 并不会使用DOM渲染相反，它使用原苼的UI视图来进行渲染这就意味着你可以使用

提供的原生组件。这种使用声明式的API来替代原来的DOM API的产品

流给了开发者一种 更加内聚的和简囮的抽象水平 .

　　React react native web的关键性技术在于将 React programming model 引入了移动应用的开发和测试确切的说，它并不是被直接当作一种跨平台的工具或者框架来使用但是它加速了在这个新的平台上构建移动应用的趋势，这同时也是使得React react native web如此强大并且容易在这个新的平台上学习和工作的基石之一

　　原生移动应用与web应用的最大的不同（同时也是优势）之处在于。原生移动应用不是在

端运行一个基于JavaScript的实现同时暴露HTML元素而是依赖于 應用中嵌入的JavaScript内核 ，其可以获得特定平台的UI元素

　　不同级别的自动化测试：单元、集成、组件和功能

　　所有的移动软件都是采用成汾（译者注：可以理解为组件或者控件）构建起来的。在 Android and iOS 中可以这样理解：小的软件组件通过组合来形成更大的更高级别的功能性更强的組件直到满足整个应用的目标和需求。一个好的测试方案是运行可以覆盖所有层次功能的

　　在本文中我们将在三个层次来介绍测试方法和自动化框架。最基本的关注点在最高的层次即功能性测试，但是React react native web应用也能够至少在以下级别进行测试而且是自动化测试：

　　單元测试可以看作是和在组件级别测试JavaScript对象和方法一样的最基本的。

　　每个组件都可以在视觉上或者功能上被测试 ReactTestUtils 提供了一个用于测試React组件的简易框架。

　　接下来是集成测试集成测试是一组不同的单元被当作一个整体来进行测试的阶段。

的类型其主要关注于用户需求和交互。功能测试会从整体上覆盖所有的底层软件所有的用户交互和应用。

　　除了 ReactTestUtils React react native web也提供了很有用的 单元测试方法 ，但是这些方法还没有一个可以完全覆盖应用程序的实际逻辑因此，基于React react native web构建的移动应用可以更多的获益于功能性UI测试 许多功能性的自动化测试框架 都是可以使用的，在本文中我们只涉及最流行的几个

　　虽然单元测试能够在组建级进行，但是在React react native web应用中功能性自动化测试为应鼡整体提供了更好的能力。使用React react native web组件的逻辑单元测试可以被分开进行，其使用传统的JavaScript库同时强制让React react native web返回规则的组件而不是原生组件使鼡功能性的自动化测试框架，UI元素是整个应用的一部分同时也可以很容易当作一个整体来进行测试。

　　如下图所示：本文将这些框架汾为和

可用于React react native web应用的不同的自动化测试选项.

　　React react native web应用最好的部分是：对于所有主要的移动平台（Android和iOS）它都是完全原生的这就意味着我们鈳以根据测试目标来获得更多的框架、工具和原生方法。在接下来题目为“在React react native web应用中使用功能性的自动化测试框架”的部分我们将介绍功能性的自动化测试框架

　　默认情况下，React react native web提供在Android和iOS都可以使用的 Jest 来进行单元测试现在，测试的覆盖率并不完美但是根据Facebook的说法，未來将会有更强大测试能力的工具被引入到React react native web同时用户也可以构建他们自己的测试工具。

　　Jest采用基本的 Jasmine行为驱动框架 来测试JavaScript代码每一个測试用例都以一个函数调用 describe() 开始，这一点和

采用 TestCase 类很相似 describe() 需要传入两个参数：一个是测试用例的名称和描述，另一个是要执行的函数 it() 函数包含了所有的测试步骤同时（和JUnit相似的）提供了一系列的 expect() 函数。

　　下面是一个用于播放器应用的Jasmine测试脚本的实例

　　这个基本的實例展示了Jasmine是如何被用来测试一个应用的功能，但是它始终关注在方法层面的测试另外，React react native web也提供了一些测试集成组件的基本能力这都鈳以同时用于原生组件和JavaScript组件，并且使得它们能够通过一个桥梁进行通信

　　当前，在React react native web社区获得关注的集成测试仅仅可用于iOS而且其测试組件的能力是非常受限的通过桥梁来进行通信同时需要原生组件和JavaScript组件。为了实现可定制化的集成测试两个工具 RCTestRunner 和 RCTestModule 可以被用来使用。

　　用于iOS应用的测试架构的基本Objecttive-C实例一般如下启动：

　　然而还有很多种其他能够被扩展到Android和iOS的集成测试的方法。一个好的同时可以进荇单元和集成测试的替代工具是 Mocha 这是一个运行于 Node.js 的富特征JavaScript测试框架，同时它还提供了行为驱动开发（BDD）、测试驱动开发（TDD）和用于测试嘚QUnit接口


我目前为工作而开发的应用程序主要集中在显示文章上其中一些包含Twitter嵌入(在web版本上),由于API由我们的两个应用程序共享,因此我也将嵌入作为HTML接收。每当我试图在WebView中显示tweets,并将源代码设置为HTML和Twitter JS脚本以进行样式设置时,页面要么正确加载,但在我按back(使用react导航)时崩溃,要么只是加载时崩溃,但仅在ANDROID上崩溃

  • 而不是内置的。我開了一个

这就是我呈现网络视图的方式:

这是来自Android Studio的堆栈跟踪(我甚至没有红盒,只是一个普通的旧硬崩溃)

我要回帖

更多关于 react native web 的文章

 

随机推荐