基于React Native的手工艺分享App设计与实现.docx

《基于React Native的手工艺分享App设计与实现.docx》由会员分享，可在线阅读，更多相关《基于React Native的手工艺分享App设计与实现.docx（44页珍藏版）》请在课桌文档上搜索。

1、摘要本文设计的手工艺app主要是可供用户足不出户就可以在家进行线上学习手工艺制作的。可以有效地解决用户想学习却找不到学习的地方的这个问题。本软件的功能主要是用户学习为主。下面列出了该论文所需要完成的工作内容：具体介绍了该项目的背景和该项目在开发中所要使用到的相关技术；阐述了手工艺app的需求分析、功能设计、系统实现和调试以及运用到的一些技术。app使用ReaCtNative为框架，语言以及CSS来开发。ReactNatiVe可以用JaVaSCriPt也能编写原生移动应用。虽说这是一个跨平台的应用开发，但由于缺少条件，所以本文的项目主要是运行在安卓平台上的。同时ReaCtNative的版本非常地

2、多样，而本软件的ReactNative版本为0.50.1.在软件测试部份，本文对各个主要模块进行了功能性测试并且对总体进行了非功能性测试。关键词：手工艺ReaCtNativeJavaScriptCSSAbstractThehandicraftappdesignedinthispaperismainlyforuserstoIeamthehandicraftmakingonlineathomewithoutleavinghome.ltcaneffectivelysolvetheproblemthatuserswanttolearnbutcannotfindaplacetoleam.Themainf

3、unctionofthissoftwareisuserleaming.Thefollowingisalistoftheworktobecompletedinthispaper:specificallyintroducesthebackgroundofthisprojectandtherelatedtechnologiestobeusedinthedevelopmentofthisproject;describesthedemandanalysis,functiondesign,systemimplementationanddebuggingofthehandicraftappaswellass

4、ometechnologiestobeused.Appisdevelopedwithreactnativeasframework,languageandCSS.ReactnativecanwritenativemobileapplicationsaswellasJavaScriptAlthoughthisisacrossplatformapplicationdevelopment,butduetothelackofconditions,theprojectofthispaperismainlyrunningontheAndroidplatform.Atthesametime,theversio

5、nofreactnativeisverydiverse,andtheversionofreactnativeofthissoftwareis0.50.1.Inthesoftwaretestingpart,thispaperhascarriedoutfunctionaltestoneachmainmoduleandnonfunctionaltestonthewhole.Keywords:handicraftReactNativeJavaScriptCSS第一章绪论11.1. 选题背景和意义11.2. 国内外研究概括和发展趋势21.2.1 国内研究概括和发展趋势21.2.2 国外研究概括和发展趋势

6、21.3. .论文的主要工作31.4. 主要技术简介31.4.1 Android平台31.4.2 ReactNative框架31.4.3 JavaScript技术41.4.4 CSS技术41.4.5 Node51.5. 章、结5第二章系统分析62.1 系统功能分析62.1.1 登录功能62.1.2 首页62.1.3 抽屉页62.1.4 查看手工艺简介页面62.2 系统性能分析72.2.1 准确性和及时性72.2.2 易用性72.2.3 安全性72.3 可行性分析72.3.1 技术可行性72.3.2 操作可行性82.3.3 设计可行性82.3.4 经济可行性82.4 本章小结8第三章系统设计93

7、.1 系统层次模块93.2 系统流程93.3 数据流程图103.4 功能设计模块113.4.1 用户登录113.4.2 首页133.4.3 抽屉页153.4.4 手工艺简介页面163.4.5 手工艺教程页面183.5 本章小结21第四章系统测试224.1 测试环境224.2 功能测试224.3 非功能性测试234.4 用户界面测试244.5 测试总结25第五章总结与展望265.1 研究成果265.2 未来方向26参考文献28致谢30第一章绪论IJ.选题背景和意义随着科学与技术地不断发展，许多的手工艺品也可以在机器上进行大量地生产，这造成了物质的泛滥。单一、固定的产品已经不能满足人们的需要，人们

8、开始追求个性的、独一无二的手工艺品。不得不说，手工艺品在这个时代背景下出现了很大的机遇。传统的工匠不仅可以创造自己的平台特色，使用的工具还可以通过发表纪录片、文字、媒体。以前制作手工的艺术人不仅能够，把目标注意在很多流行的简短小视频或者直播（把百度百科的放上来直播的意思），通过这样的方式就能把，整个的制作流程呈现给大家。增强平台销售商品的信心，提高员工的曝光度，打造品牌。此外，传统工艺也可以通过融资等打开与知名品牌的合作渠道。例如，在东京和Skytrey,Starbox和日本传统的玻璃技术EdoCabOS,推出了一套限量咖啡饮料，吸引了消费者的注意。咖啡和伟大的技术的结合为每个发行方都有好处。

9、随着人们生活水平的不停进步，在满足了基本的物质生活需求后，需要一些额外的手艺或来满足自己的精神需求。一直以来，手工艺采用的都是手口相传的形式来进行学习或传授他人。但就目前的快节奏生活来看，人们要想快速地找到有经验的手工艺人来进行学习是比较困难的。同时也随着有经验的手工艺人逐渐高龄化，仅仅凭着口头相传无法增加手工艺传播的范围。也无法和现代人的生活习惯进行匹配。故借助这个平台，为这些想要进行手工艺学习的人们提供了一个学习的环境。目前，互联网的发展不仅给传统手工艺者的工作带来了新的发展，而且也让我们的信息流通变得越来越容易，如静乐剪纸、光影纸雕等。来自中国西安的静乐剪纸，和来自于美国的光影纸雕，但是

10、它们两者使用的制作材料是几乎一模一样的，制作方法也差不多一样。互联网信息链接让他们知道自己的位置。在静乐剪纸中运用光影雕刻，可以解决静乐剪纸受个体文化的影响和不太复杂的创意，也可以提高精致度。很明显，传统技术的融合带来了新的活力，互联网提供了一个很好的机会。1.2. 国内外研究概括和发展趋势1.2.1 国内研究概括和发展趋势现如今，人们在网络上进行学习已经是大势所趋，这都是因为互联网在近几年的不断发展壮大。我们也非常感谢互联网能够给予这个平台，让人们足不出户即可在家进行学习。互联网可以增加学习视频的传播性，从而让更多的人可以进行学习。许多传统的工匠利用网络信息的特性来建立一个个的专业的网站和A

11、PP学习平台。我们为了提高用户的兴趣以及更清晰地描述手工艺品的制作过程，同时也降低用户在学习过程中的难度可以在平台设计中可以添加到3D、VR等元素。我们为了让许多传统手工艺品的继承人与家庭继承人甚至男女继承人之间的差距可以缩小，从而为传统手工艺品的未来发展吸引新的工人，而使用了这种方法。现在，即使有各种各样的应用程序在建立中也遇到了许多困难。首先，传统工艺的创新太低、太慢，无法进一步激发用户的兴趣。如今，在信息爆炸的碎片化时代，没有持续创新的应用很快就会被大众忘记，因为对于用户来说这种新鲜感相对于高科技只是暂时的。如何维护好用户之间的关系才是一个大问题。其次，传统的地方工艺需要花费大量的时间和

12、经历许多复杂的过程，有时有几十个复杂的过程只是为了准备任务。第三，许多与传统工艺和应用程序制造过程相关的常识必须由一个由导师和工匠组成的特殊团队进行解释和传授。如何招聘专业人才，制作出质量有保障的教学视频，无疑是一个大问题。1.2. 2国外研究概括和发展趋势国外的市场竞争不如中国激烈。整个市场的发展潜力仍然巨大，潜在用户数量也很大。一些外国用户使用应用程序的可能性仍然相对较高。相互传播，广泛实施，将增加用户的关注度。国外应用程序的开发有自己的专门团队，专利名称也远多于中国。开发的应用程序功能强大，符合质量标准，用户体验自然就会良好。国外据我目前找到的资料显示，暂时还没发现有比较系统的手工艺学习

13、APP,但国外的手工学习网站挺齐全的。但国外的应用程序界面设计值得我们去借鉴和学习。不过随着时间的推进，在文明的推动下，国外工艺设计应用程序越来越多，大多以用户为中心，从用户的角度出发，按照人机技术的原理，交互设计也符合用户的应用习惯，具有很强的普及性；在视觉设计方面，色彩的使用相对平和，这在一定程度上防止了用户在长时间使用这款应用时感到紧张。1.3. 论文的主要工作该项目应用中的登录功能、查看教程、查看手工艺简介等功能的实现与设计都是由我独立完成的，并且我为了能够顺利地实现这些功能，我做了以下几点工作：(1)学习与这些功能模块相关的技术，查阅相关技术资料，并且和指导老师进行讨论，选择其中最适

14、合的技术和开发框架。(2)依照产品需要来对系统功用需求来实行剖析，对非功能需求进行设计，这样就能让软件愈加地契合用户的应用习性。(3)独立完成上面所列出来的功能，并对实现代码过程中遇到的问题列出解决方案，实现性能后再对模块实行测试。(4)在开发完成后，完成系统的功能性测试与非功能性测试。1.4. 主要技术简介本节主要介绍了软件实现时所用到的技术和平台。该项目尽管应用的是跨平台的移动应用开发框架，但具体实现时因为自身硬件的原因只有在Android平台上面测试过。所用的编程语言为JavaSCriPt,还有层叠样式表。1.4.1 Android平台Google公司开发的移动操作系统Android。A

15、ndroid是基于Linux内核以及其他开源软件。这款移动操作系统专为触摸屏移动设备设计比如智能手机和平板电脑等。此外，谷歌还进一步开发了用于电视机、汽车和手表的Android电视、AndrOid汽车和Wear操作系统，它们每一款都有独特的用户界面。1.4.2 ReactNative框架ReactNatiVe,是Facebook开发的一个多平台的移动应用开发框架，也被称之为RN。JS框架上的JS源代码，JS框架自诞生以来一直是支持IOS和Android一个开源的平台。ReaCtNatiVe开发移动应用程序使用的是JaVaSCriPt语言、JSHTML、CSS,所以，那些熟悉Web前端开发的人可

16、以进入移动应用领域，没有太多需要学习的东西。而把ReactNative合并起来的是两个方式，一个是采用JS桥接，另一个是加NatiVe桥接。最终产品是一个从应用触感上很难与用Objective-C或Java编写的应用分辨开来的的真正的移动应用。ReactNative与原来的应用程序所使用的底层Ul组件几乎相同。你所要做的就是用JaVaSCriPt和React的形式对这些基本组件进行组合起来。当你在调试界面之时会十分的方便，更改代码之后保存，界面会自己跟着变化，这一点在调试的时候非常实用，但是有时速度有点慢，因此需要重置。1.1.1 JavaScript技术JavaScript是一种解释型的脚本

17、语言，在代码的操作期间来进行逐行来解释的。同时，因为能够运行在各种各样的平台下，这必定少不了浏览器的支持。JavaScript是一种不仅能够创立对象，还可以使用现有的对象的基于对象的脚本语言。为什么JavaSCriPt会被归类为直译言语，这是由于负责的引擎每次运行时都会加载代码并进行解译。直译言语的弱点是安全性较差，而伴随着服务器的发展壮大，尽管程序员更喜欢在服务器端运行脚本，这都是为了保证安全，但是JaVaScript越来越被人们所使用以其跨平台、易用等优点。JavaScript在HTML页面中日常的用途是嵌入动态文本的；响应关于浏览器事件的；读取HTML元素并写入；验证数据，在把数据提供给

18、服务器之前；检测信息有关访问浏览器的；控制Cookie,包括服务器端编程的创建和修改实现基于node.js技术上的。1.4.4 CSS技术层叠样式表是一种用于显示文件模板的计算机语言，例如：HTML（使用标准通用标记语言）或XML（标准通用标记语言的子集）。CSS不仅能够对网站元素进行动态格式化使用不同的脚本语言，还可以对网站进行静态修饰。CSS支持所有字体大小，可以准确地检查元素的像素布局在网站中，并具有编辑网站对象和模板的能力。CSS样式表可以在多个页面上使用相同的CSS样式表，但是这要存储在一个CSS文件中。CSS样式表理论上可以在几个页面上填写相同的样式，它不属于任何一个页面的文件，在

19、任何页面文件中都能够将其使用。1.4.5 NodeNode是运行在服务器上的JaVaSCriPt开发平台。这就像PHP、PythonPerkRUby和其他服务器端语言一样实现JaVaScriptoNOde用于创建响应速度快、扩展方便的网络程序，是一个基于ChromeJavaScript运行时的平台。Node实现了低功耗、高效率，非常适合分布式设备上的实时数据密集型操作，原因是采用了事件驱动以及无阻塞的/O模型，。1.5本章小结本章的第一节主要介绍了我为什么选择手工艺App来进行研究的一个背景和意义。第二节主要说的是手工艺App在国内外的研究现状以及未来的发展空间。第三节介绍了我为了完成项目所做

20、的一些工作。第四节主要介绍了完成项目所使用的一些技术和开发框架等。第二章系统分析2.1 系统功能分析该软件的主要用户群体是广大手工艺的爱好者们，所以它的定位是一个能满足到用户学习手工艺的需求类APP。要满足到这个需求就需要该软件要有查看手工艺简介、教程等功能。2.1.1 登录功能该软件的登录功能是在最开始的一个页面的，只有用户输入的用户名和密码准确无误才能成功进入主页面，否则会弹出用户名或密码输入错误的信息进行提zjsO2.1.2 首页首页主要是一个轮播图加上可以查看手工艺的简介和简单的图片组成的。用户在登录成功之后，即可查看到首页的内容。首页主要展示的是一些手工艺的种类以及它们的一些简单介绍

21、和它们的作品照片展示。2.1.3 抽屉页在首页的左上角有一个类似菜单的按钮，点击这个按钮即可进入到抽屉页面。抽屉页最上方是用户的头像以及用户名。这里面主要是用户的个人中心。现在暂时包括有我的作品和我的卡包这两项。2.1.4 查看手工艺简介页面点击首页关于该手工的文字介绍，即可详细查看属于该手工的简介。该页面显示所有有关于该品种手工艺的简单介绍。包括但不限于该手工艺的起源、发展历史、使用材料、种类、作用价值、代表人物等等。2.1.5 查看手工艺教程页面点击首页关于该手工的图片，即可查看属于该手工的教程。该页面显示该手工的视频教程，点击视频即可在线学习。2.1.6 我的作品页面该用户可以存放用户上

22、传的作品，也相当于一个草稿箱的作用。用户可以来到此页面查看自己的作品，该页面只有用户本人能够看见。2.2 系统性能分析一个系统的好坏不仅在于其功能是否强大，更在于其性能是否完善。为了让应用变得愈加契合用户的应用习性，在对软件进行实现时应该考虑如何让软件的操作简单易懂，容易扩展出新功能，并且让已经实现的功能可以稳定高效地运行。本系统应满足以下性能要求：2.2.1准确性和及时性系统应具备能够准确无误、及时响应用户的操作的性能。2.2.2易用性本应用直接面向用户，考虑到用户可能不太熟悉软件。因此，软件操作方面必须遵循简单易用的原则和具备友好的用户界面，并具有相对人性化的人机交互界面。要保证系统的易用

23、性这一点，就要求系统应该尽量使用用户所熟悉的图标等。2.2.3安全性所有系统流程（包含系统硬件、软件、应用、保证及相关人员）和系统生命周期的所有阶段（包含演示、设计、开发、使用、保护及拆卸）的一切流动，实施安全要求，该系统对危险源的危害要一字不差，并采取技术和管理措施，确保安全立法，实现火灾风险或将风险控制在可接受的水平，都被系统安全性要求涵盖，以避免事故的发生。2.3可行性分析2.3.1技术可行性软件开发包括开发方法、软硬件平台、网络结构、系统规划和结构等多种技术。有必要分析这些技术的成熟度和现实性，并详细介绍所涉及的技术在软件开发。ReactNative的优点关键就是调试方便，利用CSS来

24、实行规划。对于前端来说，它给程序员减少了大量的学习资本，并显著减少了代码量。而大部分代码包括游戏逻辑和数据，程序员只需要写一套，就都能运行在AndrOid和IOS两大平台上。界面上因为是从react一起打包包装的，一部分有一些平台。跨平台能够减少开发资本的和开发人员的数量在理论上。大多数公司选择使用ReaCtNative的关键缘由也是热更新。让用户经常更新APP会很烦。ReactNatiVe尽管还不是很成熟，在一些只需要提供展示效果的页面中使用还是非常简单实用的。2.3.2操作可行性通过对可能使用本软件的用户进行需求调研、分析，特别针对手工爱好者的年龄情况，设计出合理友好的用户操作界面，同时使

25、软件的操作方式简单明了。用户在登录之后，通过简单的操作，即可查看到相应的手工艺品介绍以及教程。而且图标的设置也与其他APP大致相同，做到让用户即使从来没接触过，也能一下子就上手。因此，本软件在操作方面具备可行性。2.3.3设计可行性本软件使用reactnative的框架模式。Ul方面可以只通过JaVaSCriPl来进行编写。而且基于reactnative的热重载模式，代码一编译好保存即可查看更新代码后的效果。图标的设计也是由PhOtoshop自行绘制的。操作难度不大。因此，本软件在设计方面具备可行性。2. 3.4经济可行性经济可行性是对经济效益进行评估，而评估的主要内容有软件开发费用支出以及软

26、件投入使用可能带来的收益。本系统的设计和开发的成本都相对较低，所用到的图标等主要是靠自己绘制。在硬件方面，主要适用于已经普及的智能手机，所以硬件成本也不高。综上所述，从经济可行性分析，本软件在经济上可行。2.4本章小结本章通过结合用户自身对软件的需求，写出了该应用的核心功能并且对功能进行详细说明，最后再根据用户的需求特点和市场上的终端特点列出了非功能性需求。第三章系统设计3.1 系统层次模块系统层次模块是通过对用户的需求进行详细的分类之后，达到衔接用户界面（视图层）与数据（数据层）的一种结构。一个复杂的系统按功能划分为许多模块。模块之间有通信链路。几个模块组成一个平面。每一层都只是单方面的依赖

27、，不形成一个圆形结构。系统的层次模块图如图3-1所示：1SI抽屉页用户登录一查看简介查看教程图3T系统层次模块图3.2 系统流程描述系统物理模型的传统工具是系统流程图。它的基本思想是把系统的所有细节（步骤、文件、数据库、表格、人工过程等），系统各部分之间的数据活动用图形符号来进行描述。系统流程图显示系统流程能更好、更清晰地。系统流程从用户登录开始，用户可以在登录界面中输入用户名和密码登录进本软件。只要把用户名和密码输入正确之后，就可以看见软件的首页了。软件的首页主要有展示手工艺图片的轮播图，以及手工艺的图片加文字组成的手工艺简单介绍。在软件里，我并没有设置顶部或底部导航栏，主要是为了让软件的界

28、面看上去更加地简洁大方，让用户更加地易懂。在软件里设置了一个左抽屉页，当点击左上方图标的时候，抽屉页就会出现。在抽屉页里，我设置了一个用户头像,这算是个人中心的一个入口。还有一个我的作品和我的卡包页面。系统流程图如图3-2所示:开始用户登录判定是否登陆成功抽屉页A我的作品首页查看简介查看教程图3-2系统流程图3.3 数据流程图能详细地描绘系统数据流程的关键工具是数据流程图。把数据形象化，然后用流程图描绘出系统中所有信息的来龙去脉以及实践流程。观察数据流程图，我们能够清楚的了解系统内部数据的流动方向及其加工储存状况。数据流程图能将简单地展现出复杂的系统数据，使我们更加方便地理解、阅读，同时有利于

29、系统的后期保护和二次开发。数据流程图有两个特点：抽象性和概括性。抽象性是指数据流图只留下信息和数据的存储、活动、应用和处理状态而去掉了详细的组织、分配和物质流，。概括性则是指将系统的处理与不同的业务联系起来的数据流程图，构成一个整体。在绘制数据流图时，要注意档次的分类，我们要学会看数据流程图，要增强理解数据流图。我们在一开始时可能并不会完整地理解一个系统。我们在分析一个系统时，可能会错误的和不准确的对问题的理解，但是我们应该根据自己的理解用数据流图来表达、验证和慢慢修正。数据流程图如图3-3所示：我的作品查看简介查看教程抽屉页首页登录图3-3数据流程图3. 4功能设计模块3.1.1 用户登录3

30、.1.1.1 用户登录用户登录的页面如图3-4所示:图3-4用户登录3.4.1.2操作流程操作流程如图3-5所示：开始登录页面输入用户名和密码否是否输入正确是跳转到主页.结束当前页面图3-5用户登录流程图3.4.1.3详细操作输入项：用户名，用户密码。输出项：若登录成功，则显示软件的主界面，反之，吐司提示登录错误信息。处理：判断用户名、密码是否有填写，并且用户名和密码是否对应每一个账号并填写正确。3.4.2首页3.4.2.1首页软件的首页如图3-6所示：折纸折纸是一种以纸张折成各种不同形状的艺术活动.折纸不只限于使用纸张.世界各地的折纸爱好者在整拉折更规范的同时,使用名种各样的忖料,511：蜴

31、箔纸、餐巾出、小酸薄片等.图3-6首页3.4.2.2操作流程操作流程如图3-7所示:开始点击登录按钮跳转主页面结束3.4.2.3功能描述应用的首页是使用SWiPer、ImageViewxTeXtVieW这三个组件来进行搭配组成的。首页的内容主要包括有轮播图查看手工艺以及一部分的手工艺的简介。当用户点击相应的地方就会进入到相应的页面。.主要的功能就是让用户了解到手工艺品的种类以及简单的手工艺的一些介绍。3.4.3抽屉页3.4.3.1抽屉页页面抽屉页如图3-8所示:山中要我的件品（不只吸f使用 侄用了名奸名图3-8抽屉页3.4.3.2操作流程操作流程如图3-9所示：首页菜单图标抽屉页我的作品我的卡

32、包图3-9抽屉页操作流程3.4.3.3功能描述抽屉页设置的组件主要是个人中心，个人的作品上传以及后续会添加在线商城等功能。在后期，主要是想设置为用户的个人中心。现在大多数的APP也是会采用抽屉页的这个组件，显得软件界面比较简洁大方。3. 4.4手工艺简介页面3.4. 4.1手工艺简介页面（以折纸界面为例）手工艺简介页面如图3T0所示：11:14折纸简介折纸折纸是一种以纸张折成各种不同形状的艺术活动。折纸不只限于使用纸张。世界各地的折纸爱好者在坚持折叠规范的同时，使用了各种各样的材料，如：锡箔纸、餐巾纸、醋酸薄片等。折纸大约起源于公元1世纪或者2世纪时的中国，6世纪时传入日本，再经由日本传到全世

33、界。也有说法认为折纸起源于日本和西班牙。折纸与自然科学结合在一起，不仅成为建筑学院的教具，还发展出了折纸几何学成为现代几何学的一个分支。折纸既是一种玩具，也是一项思维活动：是一个和平与纪念的象征手段，也是一种消选方式图3-10手工艺简介页面3.4.4.2操作流程操作流程如图3-11所示：用户登录点击文字查看简介3.4.4.3功能描述该页面主要是查看该种类的手工艺品的简介。用户在首页通过简单的点击操作，即可查看所有有关于该品种手工艺的简单介绍。包括但不限于该手工艺的起源、发展历史、使用材料、种类、作用价值、代表人物等等。3.4.5手工艺教程页面3.4.5.1手工艺教程页面（以折纸教程为例）手工艺

34、教程页面如图312所示:6:17折纸教程折纸推荐视频新纸是一种以纸张后成各种本同影状的艺术活动。字蝶字绣足用专用的绣结和卜字格布进行刺绣。H陶射编织构材编织足以蠕纹棉花线钠成的白色蒂丝钩针编织图3T2手工艺教程页面3.4.5.2操作流程操作流程如图3-13所示：用户登录点击文字杳看教程图3-13查看手工艺教程页面3.4.5.3功能描述该页面主要是查看该种类的手工艺品的教程。用户在首页通过简单的点击操作，即可查看所有有关于该品种手工艺的教程。点击视频即可观看教程。该品种手工艺的视频下方，还会有其他的推荐视频。3.4.6我的作品3.4.6.1我的作品页面我的作品页面如图3-14所示:6:22这个人

35、很懒，暂时还没有作品图3T4我的作品页面3.4.6.2操作流程操作流程如图3-15所示：开始*登录账号密码是否输入正确首页抽屉页我的作品查看作品上传作品_T结束图3-15我的作品操作流程3.4 .6.3功能描述本页面主要功能是放置用户上传的视频作品，可供用户自己查看。同时用户可以自己上传作品，可以先把它存在草稿箱，也就是我的作品页面。3.5 本章小结本章主要通过系统的流程设计、数据设计以及功能设计分别对登录模块、首页模块、抽屉页模块、查看手工艺简介模块以及查看手工艺教程模块进行了详细地分析设计。设计过程也是充分地考虑了用户的使用习惯以及使用学习行为。第四章系统测试系统测试是软件开发过程的重要组

36、成部分，通过对项目开发过程的产品进行差错审查，从而保证其质量卓越。因此，每个开发者都应该学会养成良好的测试习惯。系统测试有以下几点意义：(1)系统测试不单单是发现错误，而是在使用它们之前尽可能多地进行测试，排除软件开发过程中遗留的潜在错误。(2)进行系统测试，能避免投入使用过程中产生不可挽回的损失。(3)完整的测试本身是评估软件质量的一种方法。系统测试是具有一定的价值的，在经过一系列测试之后没有发现错误，可以说明软件质量良好，可以投入使用。4.1 测试环境1 .硬件：Windows102 .软件：雷电模拟器(版本为Android7.1.2)4.2功能测试功能上的测试主要包括对各项功能点的测试。

37、下面就以登录功能为例，用户名称、密码文字输入框是否能成功输入信息，“登录”按钮是否能正常使用等。测试用例如下：用例编号测试项操作步骤预期结果数据实际结果DLOOl成功登录点击“登录”按钮，进入登录页面，输入用户名称admin与密码123,点击“登1、成功登录2、登录失败用户名称：admin用户密码：123成功登录录”按钮DL002用户名称点击“登录”按钮，进入登录页面，输入用户名称与密码admin,点击“登录按钮1、用户名称正确，成功登录2、提示用户名称与密码不相符，请重新输入1、（空）2、英文：admin3、数字：1234、中文：山间雾5、符号：%1、提不用户名称不能为空2、成功登录3、4、

38、5、提示用户名称与密码不相符，请重新输入DL003用户密码点击“登录”按钮，进入登录页面，输入用户名称admin与密码，点击“登录”按钮1、用户密码输入正确，成功登录2、提示用户密码与用户名称不相符，请重新输入1、（空）2、英文：admin3、数字：1234、中文：山间雾5、符号：%1、提示用户密码不能为空2、成功登录3、4、5、提示用户名称与密码不相符，请重新输入DL004“登录”按钮点击“登录”按钮，进入登录页面，输入用户名admin称与密码123,点击“登录”按钮1、“登录”按钮正常，用户成功登录2、“登录”按钮未能正常使用，用户登录失败“登录”按钮正常，用户成功登录4.3非功能性测试兼

39、容性测试：该项目通过创建的各个不同的模拟器，测试软件是否能在不同版本以及不同分辨率的情况下正常显示。经过测试可知：软件在不同的分辨率下均能正常显示；至于在安卓的各类主流版本中亦能正常运作。测试用例如下所示：用例编号测试项类型预期结果实际结果JRXOOl分辨率1920*1080显示正常显示正常JRX002分辨率1280*720显示正常显示正常JRX003分辨率800*480显示正常显示正常JRX004版本4.0显示正常显示正常JRX005版本4.1显示正常显示正常JRX006版本4.2显示正吊显示正吊JRX007版本4.3显示正常显示正常JRX008版本4.4显示正常显示正常JRX009版本5.

40、0显示正常显示正常JRXOlO版本6.0显示正常显示正常4.4用户界面测试用户界面测试，即Ul测试，主要是对用户界面进行审核。具体工作包括：确认用户界面是否符合用户的审美；各个功能模块所对应的位置是否合理；背景颜色整体色调是否赏心悦目；界面中是否存在错别字等等。测试用例如下所示:用例编号测试项操作步骤预期结果实际结果DLLOOl标题检验标题文字是否正确；位置是否居中并处于上方标题文字正确，位置正确标题文字正确，位置正确DLL002抽屉按钮检验抽屉按钮位置是否正确；点击按钮是否能跳转到抽屉页面抽屉按钮位置正确；点击按钮可以正常跳转到抽屉页面抽屉按钮位置正确；点击按钮可以正常跳转到抽屉页面DLL0

41、03文本框检验文本框文字是否正确；输入的内容是否处于正确位置；文本框位置是否符合一般使用习惯文本框文字正确；输入内容处于正确位置；文本框位置符合一般使用习惯文本框文字正确；输入内容处于正确位置；文本框位置符合一般使用习惯DLL004图片检验图片位置是否正确；图片是否能够点击跳转图片位置正确；点击图片后能够正常跳转图片位置正确；点击图片后能够正常跳转4.5测试总结本章主要对软件的功能、非功能以及用户界面进行了简单的测试。在经过测试后发现，软件能满足最基本的运行条件，可以正常使用。在兼容性上也能够在各种分辨率以及各种版本下正常显示。用户界面方面，布局合理，界面简洁明了易于操作，符合大部分用户的使用

42、习惯。第五章总结与展望本章主要是对前面内容的一个总结，以及对未完成内容的建议，指导未来对该软件的完善工作。5.1研究成果该论文基于reactnative的手工艺APP说难不难，说易不易。该论文结合当今用户对手工艺学习的渴求，设计和实现了一个可供用户学习手工艺的学习软件。以下是项目的设计和实现的内容：(1)首先是用户登录的界面，登录部分设置了用户名和密码来作为个数据验证。因为现在还在测试阶段，所以在这里我是给定死了一个账户名和密码的，用户只有通过这唯一的一个账号密码才能登录进去。(2)用户输入了正确的账号密码之后，就可以看到我们的首页了。首页的布局使用了一个轮播图组件以及SCrOIIoVieW组

43、件来组成的。界面比较方便整洁，便于从来没接触过该软件的人来进行快速上手。在SCrOIlVieW里，由图片和文字组成，这里的操作比较简单。点击图片可以查看关于该手工艺的教程，点击图片下方文字可以查看关于该手工艺的简介。5.2未来方向(1)对该应用进行功能的扩展，因为该软件的功能还不够多不够全面。所以我准备在下一个版本增加更多能让用户使用得更舒适实用的功能，这样才能让APP对用户更有粘性。(2)在注册登录页面中添加手机短信验证功能，或使用微信、QQ、微博等快捷方式登录，实现个人信息的安全化以及用户账号的关联性。(3)增加让用户可以自己上传作品的功能。这样子可以使得素材库充足，可供学习的素材多种多样

44、。(4)在用户上传的作品下面增加点赞、评论等功能，这样可以让上传者随时得到自己作品的反馈。(5)在技术允许的情况下，可以增加私信功能。在未互相关注的情况下，双方可以发文字信息；在双方互关之后，可以发送语音、图片等功能。(6)添加上传视频之后可以在线播放或者下载到用户本地的功能。这样即使是用户在离线状态下也可以学习到自己想要学习的技能。(7)增加分享功能，使用户的作品可以更好地传播出去，获得更多的关注度以及鼓励作者上传作品视频。(8)在作品教程的下面放置作品材料的购买链接。这个功能需要与其他商城达成合作或者直接在本应用添加一个在线商城。(9)可以添加白天和黑夜的模式，可以让用户根据自己的需求调节

45、使用，更好地迎合用户的使用习惯。(10)添加搜索以及热搜榜的功能。让用户可以看到现下最对人搜索与学习的作品、手工类别是什么。参考文献1郝骏，郑紫微，段欢.基于ReactNative图像隐写的研究和实现J无线通信技术，2019,28(1):36-41.2霍文政，许志明，王嘉茵，倪伟传，万智萍.一种基于ReaCtNatiVe框架的换宿系统实现方法J.计算机技术与发展，2019,29(1):211-215.3沈超，曹婷婷，王一萌，阙艳红，李文雅.基于ReaelNaIiVe的农业气象自动化观测系统国家级平台移动应用APP设计J.农业与技术，2019,39(18):132-135.4赵永鹏.基于ReaCtNatiVe的物业管理系统设计J数字技术与应用，2018(1):165T65.5李敬，陈才扣，陆羽，盛紫朦，朱蕾，丘镇涛.基于RCaCtNatiVe的学教在线一站式平台开发J.电脑知识与技术：学术版，2018(9X):70-70.6陈宇收.基于ReactNative的智慧吉首APP的设计与实现J.电子技术与软件工程，2018(19):70-71.7钟爱青.基于ReaCtNatiVe的校园二手物品竞拍平台的设计与实现J.电脑知识与技术：学术交流，2018,14(6):89-91.8朱勇.基于R