CN105824900A - 一种基于react-native的页面展示系统 - Google Patents

Abstract

本发明涉及一种基于react‑native的页面展示系统，包括加载模块、第一交互模块、第二交互模块和页面渲染模块，所述加载模块用于加载react‑native模块，所述第一交互模块用于与所述react‑native模块进行交互，所述第二交互模块通过所述第一交互模块获取所述react‑native模块的数据接口，从而响应用户的点击操作，所述页面渲染模块用于获取来自react‑native模块的数据源，对所述数据源进行解析，并根据所述解析结果渲染页面；本发明依托react‑native对网页进行了优化设计，并且设计了网页展示系统的架构，能够在保证开发效率的前提下，显著地提升用户体验，不需要编写html，能够更为及时高效地对网页程序进行完善，避免过于频繁的版本发布。

Description

一种基于react-native的页面展示系统

技术领域

本发明涉及计算机领域，具体涉及一种基于react-native的页面展示系统。

背景技术

目前，同行业中实现的网页展示系统基本上都是使用js、css和html组合来实现的纯web页面，即由后台或者本地提供相关的url，本地由safari或者UIWebView加载相关页面，然而，这种传统的页面展示系统存在一些弊端，比如，需要服务端编写相关的web页面来支持；维护改动不灵活，需要跨团队进行沟通协作等等，此外，传统的web页面展示的人机交互效果与native相比存在较大差距：

(1)native的原生控件有更好的体验；

(2)native有更好的手势识别；

(3)native有更优质的线程模型，最大程度提升web的流畅性。

因此，尽管native开发成本更高，但是在现阶段native仍然是必须的，为了既拥有native的用户体验，又提升native的开发效率，react-native应运而生。

Facebook在React.js Conf 2015大会上推出了基于JavaScript的开源框架react-native。react-native结合了web应用和native应用的优势，可以使用javascript来开发iOS和android原生应用。在javascript中用react抽象操作系统原生的UI组件，代替DOM元素来渲染等。

react-native使开发者能够使用基于javascript和react一致的开发体验在本地平台上构建世界一流的应用程序体验。react-native把重点放在所有开发人员关心的平台的开发效率上，开发者只需学习一种语言就能轻易为任何平台高效地编写代码。

综上所述，有必要基于react-native研发一种页面展示系统，从而在保证开发效率的前提下，显著地提升用户体验。

发明内容

为了更高效地开发网页程序并且提升网页用户体验，本发明提供了一种基于react-native的页面展示系统。本发明依托react-native开源框架，使用服务器语言开发前端应用，设计了网页展示系统的架构。本发明提供的一种基于react-native的页面展示系统不仅用户体验好，能够实现传统web网页所不能实现的页面展示效果，而且开发效率高，不需要编写html。此外，还能够更为快速地进行系统的更新，避免频繁的版本发布，使得用户能够更为方便地使用最新的原生应用。

本发明是以如下技术方案实现的：

一种基于react-native的页面展示系统，包括react-native模块、加载模块、第一交互模块、第二交互模块和页面渲染模块，

所述加载模块用于加载react-native模块，

所述第一交互模块用于与所述react-native模块进行交互，所述第一交互模块包括导航器，所述导航器能够定位所述react-native模块中的数据接口，使得页面能够在不同场景之间切换，

所述第二交互模块用于捕捉并响应用户操作，所述第二交互模块通过所述第一交互模块获取所述react-native模块的数据接口，从而响应用户的点击操作，

所述页面渲染模块用于获取来自react-native模块的数据源，对所述数据源进行解析，并根据所述解析结果渲染页面。

优选的，所述页面展示系统用远程服务器来启动。

优选的，将静态页面打包成本地bundle来启动所述页面展示系统。

优选的，所述加载模块的创建方法包括：

(1)设定一个与所述第一交互模块进行交互的资源定位符；

(2)用react-native模块的native渲染类来加载所述资源定位符所在地址的文件。

优选的，所述资源定位符是本地主文件的地址；

优选的，所述资源定位符是远程服务器中与所述第一交互模块进行交互的文件的地址。

优选的，所述本地主文件为本地硬盘bundle下的后缀名为js的文件。

优选的，所述本地主文件为本地硬盘bundle下的由后缀名为js的文件打包而成的文件。

优选的，所述加载模块和第一交互模块同时实现react-native提供的数据交互接口，所述数据交互接口用于在加载模块和第一交互模块之间进行信息交互。

优选的，所述第一交互模块的创建方法包括：使用NavigatorIOS的控件来做基础堆栈，并且指定一个主页面的component。

优选的，所述页面渲染模块对网页进行渲染的方法包括：

S1、初始化网页的布局，所述网页包括主页面区和边侧区；

S2、创建网页的控件，所述控件能够通过所述react-native模块的数据接口获取数据源，并对所述数据源进行解析，根据解析结果对所述主页面区进行渲染。

优选的，所述初始化网页的布局包括：

S11、设定主页面区在父布局的位置和布局方向，并且指定所述主页面区的宽高和相对于父布局的权重；

S12、为所述主页面区创建一个布局容器，并在所述布局容器中放入一个或多个控件；

S13、创建边侧区，在所述边侧区放入一个或多个控件。

优选的，所述页面渲染模块对网页进行渲染的方法还包括：在获取数据源后在所述主页面区加载进度条。

本发明的有益效果是：

本发明提供了一种基于react-native的页面展示系统，所述页面展示系统具有如下优点：

(1)用web的编码方式实现了native的效果，用户体验好；

(2)开发效率高，不需要编写html；

(3)可以实现动态更新，减少频繁的版本发布，极大地提高了产品更新效率，为用户使用新产品提供便利：

(4)本发明的页面展示系统可以用远程服务器来启动或者是在一些静态页面打包成本地bundle来启动，避免了单一的启动方式；

(5)本发明可移植性强，能够方便地在ios和android操作系统进行移植，开发成本小，不需要跨团队进行协作。

附图说明

图1是第一个实施例一种基于react-native的页面展示系统的架构图；

图2是第一个实施例flex布局示意图；

图3是第一个实施例页面渲染模块对网页进行渲染的方法；

图4是第一个实施例初始化网页的布局方法；

图5是第二个实施例页面渲染模块对网页进行渲染的方法；

图6是第二个实施例tableView的渲染方法；

图7是第三个实施例中网页更新的方法；

图8是传统应用发布流程。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明作进一步地详细描述。

在第一个实施例中，如图1所示，一种基于react-native的页面展示系统，包括react-native模块、加载模块、第一交互模块、第二交互模块和页面渲染模块，

所述加载模块用于加载react-native模块，

所述第一交互模块用于与所述react-native模块进行交互，所述第一交互模块包括导航器，所述导航器能够定位所述react-native模块中的数据接口，使得页面能够在不同场景之间切换，

所述第二交互模块用于捕捉并响应用户操作，所述第二交互模块通过所述第一交互模块获取所述react-native模块的数据接口，从而响应用户的点击操作，

所述加载模块和第一交互模块同时实现react-native提供的数据交互接口，所述数据交互接口用于加载模块和第一交互模块的信息交互，

所述页面渲染模块用于获取来自react-native模块的数据源，对所述数据源进行解析，并根据所述解析结果渲染页面。

在搭建所述页面展示系统之前，需要安装react-native开发环境，如下模块会被安装:

Xcode6.3及其以上:ios开发工具；

HomeBrew:OSX软件包管理工具；

Node.js:react-native库；

Npm:node版本管理工具。

所述加载模块的创建方法为：首先设定本地主文件的地址作为资源定位符，然后用react-native模块的native渲染类来加载所述资源定位符所在地址的文件；所述本地主文件为本地硬盘bundle下的由后缀名为js的文件打包而成的文件。

所述第一交互模块的创建方法包括：使用NavigatorIOS的控件来做基础堆栈，并且指定一个主页面的component。

所述第一交互模块的命名规则为native调用类调起服务的js类名称，所述js类会起到native的navigationController的作用，因此需要NavigatorIOS的控件来做基础堆栈，并指定一个主页面的component。

所述第二交互模块的创建方法具体包括：从react-native获取数据相关api和对cell点击事件的进行处理。

所述页面渲染模块使用基于css的flex布局方式对网页进行渲染。

react-native是一种基于一种css语法的flex的布局方式，Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，具体的，如图2所示，在所述flex布局方式中，任何一个容器都可以指定为flex布局。容器默认存在两根轴：水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做crossend。

容器中的控件默认沿主轴排列。单个控件占据的主轴空间叫做mainsize，占据的交叉轴空间叫做cross size。通过容器支持的属性来对控件做横向布局或者是纵向布局。

所述页面渲染模块对网页进行渲染的方法如图3所示，具体为：

S1、初始化网页的布局，所述网页包括主页面区和边侧区；

S2、创建网页的控件，所述控件能够通过所述react-native模块的数据接口获取数据源；

S3、对所述数据源进行解析，根据解析结果对所述主页面区进行渲染。

所述初始化网页的布局如图4所示，包括：

S11、设定主页面区在父布局的位置和布局方向，并且指定所述主页面区的宽高和相对于父布局的权重；

S12、为所述主页面区创建一个布局容器，并在所述布局容器中放入一个控件；

S13、创建边侧区，在所述边侧区放入一个控件。

本发明第二个实施例，与第一个实施例的区别在于：

所述页面渲染模块对网页进行渲染的方法如图5所示，具体包括：

S1、初始化网页的布局，所述网页包括海报区和边侧区；

S2、创建tableView，所述tableView用于获取来自react-native的数据源，并根据所述数据源对所述海报区进行渲染。

所述tableView包括tableViewheader、TableViewDataSource、TableViewRow、tableViewCell和TableViewSeparator，

所述tableViewheader用于渲染海报区，

所述TableViewDataSource用于渲染tableView的数据源，

所述TableViewRow用于渲染tableView的每一行的数据，

每行中具体由一个或多个tableViewCell来进行渲染，

所述TableViewSeparator用于对每一行进行分割。

所述tableView的渲染方法如图6所示，包括：

S1、获取来自react-native的数据源；

S2、在所述海报区加载loadingView；

S3、向所述数据源请求数据，并将得到的数据解析成header数据，tableViewCell数据，tableViewSeparator数据三部分；

S4、根据数据解析结果渲染海报区。

具体的，所述初始化网页的布局包括：

S11、设定海报区的相对位置和布局方向，并且指定所述海报区的宽高和相对于父布局的权重；

S12、为所述海报区创建一个scrollView作为布局容器，并在所述布局容器中放入8个Image元素；

S13、为所述海报区加入一个TimerMixin来做定时器，定时控制图片变化；

S14、创建边侧区，在所述边侧区放入6个Image元素。

本实施例中，海报区能够实现8张图片进行轮播的效果，即图片可以自动沿一个方向进行滚动，因此，需要加入一个TimerMixin来做定时器，定时控制图片滚动。

本发明第三个实施例，一种基于react-native的页面展示系统，包括react-native模块、加载模块、js交互模块、object-c交互模块和页面渲染模块，

所述加载模块用于加载react-native的模块，

所述js交互模块为javascript与native的交互入口类，能够与react-native进行交互，

所述object-c交互模块用于响应用户操作，并通过js交互模块与react-native进行数据交互，

所述页面渲染模块用于获取来自react-native的数据源，对所述数据源进行解析，并根据所述解析结果渲染页面。

其中，加载模块和js交互模块需要同时实现react-native提供的数据交互接口，加载模块通过所述数据交互接口与js交互模块传递数据，所述js交互模块通过所述数据交互接口与加载模块发送相关交互消息。

在本实施例中，react-native模块用iOS自带的JavaScriptCore作为JS的解析引擎，实现RCTBridgeModule接口，通过runtime接口objc_getClassList或objc_copyClassList取出项目里所有类，然后逐个判断是否实现了RCTBridgeModule接口，就可以找到所有模块类，实现js调用object-c原生方法，同理object-c可以实现RCTBridgeModule接口来和javascript通信。

所述加载模块的创建方法具体为：

首先创建一个与javascript交互的url，然后用native渲染类来加载此地址。

此url是远程服务器js交互主文件的地址，由后缀名为js的文件打包而成。

创建过程中，需要用npm命令启动服务地址，命令格式为unpm run start----root$JS_DIR，$JS_DIR为js文件路径。

所述js交互模块的创建方法具体为：

(1)使用NavigatorIOS的控件来做基础堆栈；

(2)指定一个主页面的component。

所述第一交互模块的命名规则为native调用类调起服务的js交互模块的js类名称，所述js类会起到native的navigationController的作用，因此，需要使用NavigatorIOS的控件来做基础堆栈，并指定一个主页面的component。

所述object-c交互模块的创建方法具体为：从react-native获取数据相关api和对cell点击事件的进行处理。

所述页面渲染模块使用基于css的flex布局方式对网页进行渲染。

所述页面渲染模块对网页进行渲染的方法包括：

S1、初始化网页的布局，所述网页包括海报区和边侧区；

S2、创建tableView，所述tableView用于获取来自react-native的数据源，并根据所述数据源对所述海报区进行渲染。

具体的，所述初始化网页的布局包括：

S11、设定海报区的相对位置和布局方向，并且指定所述海报区的宽高和相对于父布局的权重；

S12、为所述海报区创建一个scrollView作为布局容器，并在所述布局容器中放入6个Image元素；

S13、为所述海报区加入一个TimerMixin来做定时器，定时控制图片滚动；

S14、创建边侧区，在所述边侧区放入4个可点击的Image元素。

本实施例中，网页更新的步骤如图7所示，具体为：

(1)本地工程师将更新代码直接上传至服务器；

(2)用户打开客户端，访问服务器即可使用最新的应用。

所述页面展示系统使用react-native实现了网页原生应用，因此，在所述页面展示系统需要更新时，由本地工程师将更新代码直接上传至服务器，用户经由客户端直接登录服务器即可使用更新后的应用，这种更新方式实现了系统的动态更新，与以往的更新方式存在根本区别：

以往的方式，如果客户端出现紧急问题，必须要重新发布新版本来解决，而重新发布版本步骤繁琐，如图8所示：

(1)本地工程师更新代码后，编译生成新的应用程序；

(2)将所述应用程序发布至Apple公司审核；

(3)Apple公司审核通过，所述应用程序在App Store展出；

(4)用户在App Store进行手动更新，才可以使用最新的应用。

可见，直接发布新版本需要接受Apple公司的审核，并且用户需要手动进行应用的更新，这不仅使得应用更新受到第三方的约束，而且影响用户的体验，频繁的版本更新降低了原生应用的更新换代的效率。

本实施例是基于react-native使用服务器语言编写的前端原生应用，因此，在需要更新的时候，只需要本地修改代码上传到服务器，然后客户端访问服务器即可进行更新，绕过了App Store，避免了频繁的版本更新。

本实施例中应用react-native实现的网页与原生的体验完全一致，其中，海报区能够实现6张图片的轮播，边侧区的元素能够响应用户的点击，与用户进行交互，而使用reactive-native还能够实现传统web无法做到的动画或者交互效果，如果用传统web来实现，会带来很差的用户体验。

以上所揭露的仅为本发明较佳实施例而已，当然不能以此来限定本发明之权利范围，因此依本发明权利要求所作的等同变化，仍属本发明所涵盖的范围。

Claims (10)

1.一种基于react-native的页面展示系统，包括react-native模块，其特征在于，还包括加载模块、第一交互模块、第二交互模块和页面渲染模块，

所述加载模块用于加载react-native模块，

所述第一交互模块用于与所述react-native模块进行交互，所述第一交互模块包括导航器，所述导航器能够定位所述react-native模块中的数据接口，使得页面能够在不同场景之间切换，

所述第二交互模块用于捕捉并响应用户操作，所述第二交互模块通过所述第一交互模块获取所述react-native模块的数据接口，从而响应用户的点击操作，

所述页面渲染模块用于获取来自react-native模块的数据源，对所述数据源进行解析，并根据所述解析结果渲染页面。

2.根据权利要求1所述的一种基于react-native的页面展示系统，其特征在于，所述页面展示系统用远程服务器来启动。

3.根据权利要求1所述的一种基于react-native的页面展示系统，其特征在于，将静态页面打包成本地bundle来启动所述页面展示系统。

4.根据权利要求2或3所述的一种基于react-native的页面展示系统，其特征在于，所述加载模块的创建方法包括：首先设定一个与所述第一交互模块进行交互的资源定位符，然后用react-native模块的native渲染类来加载所述资源定位符所在地址的文件。

5.根据权利要求4所述的一种基于react-native的页面展示系统，其特征在于，所述资源定位符是本地主文件的地址或者远程服务器中与所述第一交互模块进行交互的文件的地址。

6.根据权利要求5所述的一种基于react-native的页面展示系统，其特征在于，所述本地主文件为本地硬盘bundle下的由后缀名为js的文件打包而成的文件。

7.根据权利要求1所述的一种基于react-native的页面展示系统，其特征在于，所述加载模块和第一交互模块同时实现react-native提供的数据交互接口，所述数据交互接口用于所述加载模块和所述第一交互模块的信息交互。

8.根据权利要求1所述的一种基于react-native的页面展示系统，其特征在于，所述第一交互模块的创建方法包括：使用NavigatorIOS的控件来做基础堆栈，并且指定一个主页面的component。

9.根据权利要求1所述的一种基于react-native的页面展示系统，其特征在于，所述页面渲染模块对网页进行渲染的方法包括：

S1、初始化网页的布局，所述网页包括主页面区和边侧区；

S2、创建网页的控件，所述控件能够通过所述react-native模块的数据接口获取数据源，并对所述数据源进行解析，根据解析结果对所述主页面区进行渲染。

10.根据权利要求9所述的一种基于react-native的页面展示系统，其特征在于，所述初始化网页的布局包括：

S11、设定主页面区在父布局的位置和布局方向，并且指定所述主页面区的宽高和相对于父布局的权重；

S12、为所述主页面区创建一个布局容器，并在所述布局容器中放入一个或多个控件；

S13、创建边侧区，在所述边侧区放入一个或多个控件。