CN109976756A - Ui显示效果一致性的处理方法与*** - Google Patents
Ui显示效果一致性的处理方法与*** Download PDFInfo
- Publication number
- CN109976756A CN109976756A CN201910202553.8A CN201910202553A CN109976756A CN 109976756 A CN109976756 A CN 109976756A CN 201910202553 A CN201910202553 A CN 201910202553A CN 109976756 A CN109976756 A CN 109976756A
- Authority
- CN
- China
- Prior art keywords
- platform
- component
- display effect
- react
- native
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Stored Programmes (AREA)
Abstract
本发明涉及软件开发领域，涉及一种UI显示效果一致性的处理方法与***，该方法包括：步骤1，对react‑native中第一平台和第二平台间参数配置不一致的第一UI组件进行封装，使封装后的第一UI组件可以在第一平台和第二平台显示效果一致；步骤2，确定react‑native中缺少第一平台对应的第二UI组件，则重新实现第二UI组件，使该第二UI组件可以在第一平台和第二平台显示效果一致。本发明针对不同平台间参数配置不一致的情况，将所有react‑native原有的UI库封装；针对只实现了某一平台的组件，而缺少另一平台的情况，重新实现缺少的UI组件，从而修正不一致的地方，达到各平台UI显示效果保持一致。
Description
技术领域
本发明涉及软件开发领域，特别涉及一种UI显示效果一致性的处理方法与***。
背景技术
React-Native是Facebook公司推出的一个基于React前端开发框架和以Javascript语言为基础的移动端跨平台开发解决方案。
但其目前存在一个问题：
在谷歌公司开发的安卓平台(Android)和苹果公司开发的移动端平台(iOS)上的UI元素显示效果上没有达到一致，这会导致同样的代码在不同平台的显示效果不同，从而产生额外的开发成本。
发明内容
本发明的实施方式旨在至少解决现有技术中存在的技术问题之一。为此，本发明的实施方式需要提供一种UI显示效果一致性的处理方法与***。
本发明实施方式的一种UI显示效果一致性的处理方法，其特征在于，包括：
步骤1，对react-native中第一平台和第二平台间参数配置不一致的第一UI组件进行封装，使封装后的第一UI组件可以在第一平台和第二平台显示效果一致；
步骤2，确定react-native中缺少第一平台对应的第二UI组件，则重新实现一个第二UI组件，使该第二UI组件可以在第一平台和第二平台显示效果一致。
一种实施方式中，步骤1包括：
步骤11，创建一个可在react-native环境下使用的项目；该项目包括一个第一平台的工程和一个第二平台的工程以及一个NodeJS的配置文件和JS源码目录；
步骤12，对react-native中第一平台和第二平台间参数配置不一致的第一UI组件，新建一个名称与第一UI组件名称不同的JS文件，在该JS文件中引入react-native的第一UI组件；
步骤13，新建一个与JS文件同名的类来继承react的Component类，重载Component类中的render方法，把引入的第一UI组件初始化后作为返回值返回到render方法中；其中，第一UI组件初始化的参数中配置styles属性来调整包括width、height和border在内的一个或多个与显示效果相关的参数；
步骤14，使用第一平台的模拟器或真机来运行此react-native项目；
步骤15，使用第二平台的模拟器或真机来运行此react-native项目；
步骤16，调整styles属性中的参数并在第一平台的应用中观察第一UI组件的变化直至达到预期的显示效果；
步骤17，观察第二平台的应用中第一UI组件的显示效果是否与在第一平台的显示效果一致，若不一致则继续调整styles属性中的参数，直至达到第一UI组件在第一平台和第二平台显示效果一致；
步骤18，对除第一UI组件外的其他UI组件按第一UI组件的调整方式进行调整，使得其他UI组件在第一平台和第二平台显示效果一致；
步骤19，将调整好的所有UI组件导出待用，并完成封装。
一种实施方式中，步骤17包括：观察第二平台的应用中第一UI组件的显示效果是否与在第一平台的显示效果一致，若不一致则继续调整styles属性中的参数，如果无法通过调整同一个参数达成第一平台和第二平台的显示效果一致，则引入react-native中的Plateform组件，使用判断语法判断不同平台然后配置不同的参数与平台相对应，直至达到第一UI组件在第一平台和第二平台显示效果一致。
一种实施方式中，步骤2包括：
步骤21，创建一个可在react-native环境下使用的项目；该项目包括一个第一平台的工程和一个第二平台的工程以及一个NodeJS的配置文件和JS源码目录；
步骤22，对react-native中仅在第二平台下使用的第二UI组件，该第二UI组件是react-native中缺少与第一平台对应的UI组件，引入react-native的View组件并继承react的Component类；
步骤23，从react-native中引入Text组件，并添加到View组件内；
步骤24，构造一个对象放入View组件的styles属性；其中，可配置styles属性来调整包括width、height和border在内的一个或多个与显示效果相关的参数；
步骤25，使用第一平台的模拟器或真机来运行此react-native项目；
步骤26，使用第二平台的模拟器或真机来运行此react-native项目；
步骤27，调整styles属性中的参数并在第一平台的应用中观察第二UI组件的变化直至达到预期的显示效果；
步骤28，观察第二平台的应用中第二UI组件的显示效果是否与在第一平台的显示效果一致，若不一致则继续调整styles属性中的参数，直至达到第二UI组件在第一平台和第二平台显示效果一致；
步骤29，配置Component中的Props参数并导出第二UI组件待用。
一种实施方式中，步骤28包括：观察第二平台的应用中第二UI组件的显示效果是否与在第一平台的显示效果一致，若不一致则继续调整styles属性中的参数，如果无法通过调整同一个参数达成第一平台和第二平台的显示效果一致，则引入react-native中的Plateform组件，使用判断语法判断不同平台然后配置不同的参数与平台相对应，直至达到第二UI组件在第一平台和第二平台显示效果一致。
本发明实施方式还同时提出一种UI显示效果一致性的处理***，其特征在于，包括：
封装模块，用于对react-native中第一平台和第二平台间参数配置不一致的第一UI组件进行封装，使封装后的第一UI组件可以在第一平台和第二平台显示效果一致；
实现模块，用于确定react-native中缺少第一平台对应的第二UI组件，则重新实现一个第二UI组件，使该第二UI组件可以在第一平台和第二平台显示效果一致。
一种实施方式中，封装模块包括：
项目创建单元，用于创建一个可在react-native环境下使用的项目；该项目包括一个第一平台的工程和一个第二平台的工程以及一个NodeJS的配置文件和JS源码目录；
文件新建单元，用于对react-native中第一平台和第二平台间参数配置不一致的第一UI组件，新建一个名称与第一UI组件名称不同的JS文件，在该JS文件中引入react-native的第一UI组件；
类新建单元，用于新建一个与JS文件同名的类来继承react的Component类，重载Component类中的render方法，把引入的第一UI组件初始化后作为返回值返回到render方法中；其中，第一UI组件初始化的参数中配置styles属性来调整包括width、height和border在内的一个或多个与显示效果相关的参数；
第一运行单元，用于使用第一平台的模拟器或真机来运行此react-native项目；
第二运行单元，用于使用第二平台的模拟器或真机来运行此react-native项目；
第一调整单元，用于调整styles属性中的参数并在第一平台的应用中观察第一UI组件的变化直至达到预期的显示效果；
第二调整单元，用于观察第二平台的应用中第一UI组件的显示效果是否与在第一平台的显示效果一致，若不一致则继续调整styles属性中的参数，直至达到第一UI组件在第一平台和第二平台显示效果一致；
其他调整单元，用于对除第一UI组件外的其他UI组件按第一UI组件的调整方式进行调整，使得其他UI组件在第一平台和第二平台显示效果一致；
导出封装单元，用于将调整好的所有UI组件导出待用，并完成封装。
一种实施方式中，第二调整单元具体用于观察第二平台的应用中第一UI组件的显示效果是否与在第一平台的显示效果一致，若不一致则继续调整styles属性中的参数，如果无法通过调整同一个参数达成第一平台和第二平台的显示效果一致，则引入react-native中的Plateform组件，使用判断语法判断不同平台然后配置不同的参数与平台相对应，直至达到第一UI组件在第一平台和第二平台显示效果一致。
一种实施方式中，实现模块包括：
项目创建单元，用于创建一个可在react-native环境下使用的项目；该项目包括一个第一平台的工程和一个第二平台的工程以及一个NodeJS的配置文件和JS源码目录；
第一组件引入单元，用于对react-native中仅在第二平台下使用的第二UI组件，该第二UI组件是react-native中缺少与第一平台对应的UI组件，引入react-native的View组件并继承react的Component类；
第二组件引入单元，用于从react-native中引入Text组件，并添加到View组件内；
构造单元，用于构造一个对象放入View组件的styles属性；其中，可配置styles属性来调整包括width、height和border在内的一个或多个与显示效果相关的参数；
第一运行单元，用于使用第一平台的模拟器或真机来运行此react-native项目；
第二运行单元，用于用第二平台的模拟器或真机来运行此react-native项目；
第一调整单元，用于调整styles属性中的参数并在第一平台的应用中观察第二UI组件的变化直至达到预期的显示效果；
第二调整单元，用于观察第二平台的应用中第二UI组件的显示效果是否与在第一平台的显示效果一致，若不一致则继续调整styles属性中的参数，直至达到第二UI组件在第一平台和第二平台显示效果一致；
配置导出单元，用于配置Component中的Props参数并导出第二UI组件待用。
一种实施方式中，第二调整单元具体用于观察第二平台的应用中第二UI组件的显示效果是否与在第一平台的显示效果一致，若不一致则继续调整styles属性中的参数，如果无法通过调整同一个参数达成第一平台和第二平台的显示效果一致，则引入react-native中的Plateform组件，使用判断语法判断不同平台然后配置不同的参数与平台相对应，直至达到第二UI组件在第一平台和第二平台显示效果一致。
本发明实施方式的UI显示效果一致性的处理方法与***，针对不同平台间参数配置不一致的情况，将所有react-native原有的UI库封装；针对只实现了某一平台的组件，而缺少另一平台的导致另一平台无法使用的情况，重新实现缺少的UI组件，从而将显示不一致的地方修正，达到各个平台的UI显示效果保持一致。
本发明的附加方面的优点将在下面的描述中部分给出，部分将从下面的描述中变得明显，或通过本发明的实践了解到。
附图说明
本发明的实施方式的上述和/或附加的方面和优点从结合下面附图对实施方式的描述中将变得明显和容易理解，其中：
图1是本发明实施方式的UI显示效果一致性的处理方法的流程示意图；
图2是本发明实施方式的UI显示效果一致性的处理***的组成示意图。
具体实施方式
下面详细描述本发明的实施方式，实施方式的示例在附图中示出，其中相同或类似的标号自始至终表示相同或类似的元件或具有相同或类似功能的元件。下面通过参考附图描述的实施方式是示例性的，仅可用于解释本发明的实施方式，而不能理解为对本发明的实施方式的限制。
请参阅图1，本发明实施方式的UI显示效果一致性的处理方法，包括：
步骤1，对react-native中第一平台和第二平台间参数配置不一致的第一UI组件进行封装，使封装后的第一UI组件可以在第一平台和第二平台显示效果一致；
步骤2，确定react-native中缺少第一平台对应的第二UI组件，则重新实现一个第二UI组件，使该第二UI组件可以在第一平台和第二平台显示效果一致。
请参阅图2，本发明实施方式的UI显示效果一致性的处理***，包括：
封装模块，用于对react-native中第一平台和第二平台间参数配置不一致的第一UI组件进行封装，使封装后的第一UI组件可以在第一平台和第二平台显示效果一致；
实现模块，用于确定react-native中缺少第一平台对应的第二UI组件，则重新实现一个第二UI组件，使该第二UI组件可以在第一平台和第二平台显示效果一致。
在该实施方式中，UI显示效果一致性的处理方法以UI显示效果一致性的处理***作为步骤的执行对象，或者以***内的模块作为具体的步骤执行对象。即步骤1由封装模块作为步骤的执行对象，步骤2由实现模块作为步骤的执行对象。
本实施方式中，第一平台以iOS平台为例，第二平台以Android平台为例来进行说明。
步骤1中，具体包括：
步骤11，创建一个可在react-native环境下使用的项目；该项目包括一个第一平台的工程和一个第二平台的工程以及一个NodeJS的配置文件和JS源码目录；
步骤12，对react-native中第一平台和第二平台间参数配置不一致的第一UI组件，新建一个名称与第一UI组件名称不同的JS文件，在该JS文件中引入react-native的第一UI组件；
步骤13，新建一个与JS文件同名的类来继承react的Component类，重载Component类中的render方法，把引入的第一UI组件初始化后作为返回值返回到render方法中；其中，第一UI组件初始化的参数中配置styles属性来调整包括width、height和border在内的一个或多个与显示效果相关的参数；
步骤14，使用第一平台的模拟器或真机来运行此react-native项目；
步骤15，使用第二平台的模拟器或真机来运行此react-native项目；
步骤16，调整styles属性中的参数并在第一平台的应用中观察第一UI组件的变化直至达到预期的显示效果；
步骤17，观察第二平台的应用中第一UI组件的显示效果是否与在第一平台的显示效果一致，若不一致则继续调整styles属性中的参数，直至达到第一UI组件在第一平台和第二平台显示效果一致；
步骤18，对除第一UI组件外的其他UI组件按第一UI组件的调整方式进行调整，使得其他UI组件在第一平台和第二平台显示效果一致；
步骤19，将调整好的所有UI组件导出待用，并完成封装。
对应地，UI显示效果一致性的处理***中封装模块包括：
项目创建单元，用于创建一个可在react-native环境下使用的项目；该项目包括一个第一平台的工程和一个第二平台的工程以及一个NodeJS的配置文件和JS源码目录；
文件新建单元，用于对react-native中第一平台和第二平台间参数配置不一致的第一UI组件，新建一个名称与第一UI组件名称不同的JS文件，在该JS文件中引入react-native的第一UI组件；
类新建单元，用于新建一个与JS文件同名的类来继承react的Component类，重载Component类中的render方法，把引入的第一UI组件初始化后作为返回值返回到render方法中；其中，第一UI组件初始化的参数中配置styles属性来调整包括width、height和border在内的一个或多个与显示效果相关的参数；
第一运行单元，用于使用第一平台的模拟器或真机来运行此react-native项目；
第二运行单元，用于使用第二平台的模拟器或真机来运行此react-native项目；
第一调整单元，用于调整styles属性中的参数并在第一平台的应用中观察第一UI组件的变化直至达到预期的显示效果；
第二调整单元，用于观察第二平台的应用中第一UI组件的显示效果是否与在第一平台的显示效果一致，若不一致则继续调整styles属性中的参数，直至达到第一UI组件在第一平台和第二平台显示效果一致；
其他调整单元，用于对除第一UI组件外的其他UI组件按第一UI组件的调整方式进行调整，使得其他UI组件在第一平台和第二平台显示效果一致；
导出封装单元，用于将调整好的所有UI组件导出待用，并完成封装。
步骤11至步骤19可以由封装模块或者封装模块内的单元作为步骤的执行对象，具体地，步骤11由项目创建单元作为步骤的执行对象，步骤12由文件新建单元作为步骤的执行对象，步骤13由类新建单元作为步骤的执行对象，步骤14由第一运行单元作为步骤的执行对象，步骤15由第二运行单元作为步骤的执行对象，步骤16由第一调整单元作为步骤的执行对象，步骤17由第二调整单元作为步骤的执行对象，步骤18由其他调整单元作为步骤的执行对象，步骤19由导出封装单元作为步骤的执行对象。
步骤11中，项目创建单元首先创建一个可在react-native环境下使用的库项目。项目中包括一个iOS和工程和一个Android的工程以及一个NodeJS的配置文件和JS源码目录。可以使用各个平台的创建方法依次创建这些工程。
下面针对react-native已有但显示效果有问题的UI组件，我们用再封装的方式解决。以第一UI组件为Button组件为例。
步骤12中，文件新建单元首先新建一个名称与Button不同的JS文件，然后在其中引入react-native的Button组件。
步骤13中，类新建单元新建一个与文件同名的类，并继承react的Component类，重载其中的render方法，把引入的Button组件初始化后作为返回值，返回到render方法中。在Button组件初始化的参数中配置Button组件的styles属性，styles属性是react-native组件中的一个固有属性，它影响了UI组件的显示效果，其中包含了width、height、border、color、shape等影响显示的参数。
React通过组件的思想，将界面拆分成一个个可以复用的模块，每一个模块就是一个React组件。一个React应用由若干组件组合而成，一个复杂组件也可以由若干简单组件组合而成。其中，React组件最核心的作用是返回React元素。通常最简单的组件就是一个返回React元素的函数：
function Welcome(props){
return<h1>Hello,{props.name}</h1>；
}
上面示例中，Welcome是一个用函数定义的组件。如果使用类(class)定义组件，返回React元素的工作具体就由组件的render方法承担，例如：
即使用类定义的组件，render方法是唯一必需的方法。
步骤14中，第一运行单元打开iOS模拟器或者真机，运行此react-native项目。
步骤15中，第二运行单元打开Android模拟器或者真机，运行此react-native项目。
步骤16中，第一调整单元调整styles属性中的参数，然后在iOS应用中观察Button组件的变化，直到达到预期想要的显示效果。
步骤17中，第二调整单元判断Android平台的应用中Button组件的显示效果是否与在iOS平台的显示效果一致，若不一致则继续调整styles属性中的参数，直至达到Button组件在iOS平台和Android平台显示效果一致。
进一步地，如果无法通过同一个参数达成一致则根据不同平台配置不同的参数，具体地，步骤17包括：第二调整单元判断Android平台的应用中Button组件的显示效果是否与在iOS平台的显示效果一致，若不一致则继续调整styles属性中的参数，如果无法通过调整同一个参数达成iOS平台和Android平台的显示效果一致，则引入react-native中的Plateform组件，使用判断语法判断不同平台然后配置不同的参数与平台相对应，例如iOS平台配置为参数A，Android平台配置为参数B，直至达到Button组件在iOS平台和Android平台显示效果一致。
步骤18中，其他调整单元对除Button组件外的其他UI组件按Button组件的调整方式进行调整，使得其他UI组件在iOS平台和Android平台显示效果一致。即部分UI组件存在除了style以外的属性影响UI显示，也可以通过调整Button组件的同样方式重写这个属性并反复调整到预期的显示效果。
步骤19中，导出封装单元将调整好的所有UI组件导出待用，并完成封装。
如果有其他类似组件皆使用以上步骤完成封装。
针对只实现了某一平台的组件，而缺少另一平台的导致另一平台无法使用的情况，采用以下方案进行解决，步骤2包括：
步骤21，创建一个可在react-native环境下使用的项目；该项目包括一个第一平台的工程和一个第二平台的工程以及一个NodeJS的配置文件和JS源码目录；
步骤22，对react-native中仅在第二平台下使用的第二UI组件，该第二UI组件是react-native中缺少与第一平台对应的UI组件，引入react-native的View组件并继承react的Component类；
步骤23，从react-native中引入Text组件，并添加到View组件内；
步骤24，构造一个对象放入View组件的styles属性；其中，可配置styles属性来调整包括width、height和border在内的一个或多个与显示效果相关的参数；
步骤25，使用第一平台的模拟器或真机来运行此react-native项目；
步骤26，使用第二平台的模拟器或真机来运行此react-native项目；
步骤27，调整styles属性中的参数并在第一平台的应用中观察第二UI组件的变化直至达到预期的显示效果；
步骤28，观察第二平台的应用中第二UI组件的显示效果是否与在第一平台的显示效果一致，若不一致则继续调整styles属性中的参数，直至达到第二UI组件在第一平台和第二平台显示效果一致；
步骤29，配置Component中的Props参数并导出第二UI组件待用。
对应地，UI显示效果一致性的处理***中实现模块包括：
项目创建单元，用于创建一个可在react-native环境下使用的项目；该项目包括一个第一平台的工程和一个第二平台的工程以及一个NodeJS的配置文件和JS源码目录；
第一组件引入单元，用于对react-native中仅在第二平台下使用的第二UI组件，该第二UI组件是react-native中缺少与第一平台对应的UI组件，引入react-native的View组件并继承react的Component类；
第二组件引入单元，用于从react-native中引入Text组件，并添加到View组件内；
构造单元，用于构造一个对象放入View组件的styles属性；其中，可配置styles属性来调整包括width、height和border在内的一个或多个与显示效果相关的参数；
第一运行单元，用于使用第一平台的模拟器或真机来运行此react-native项目；
第二运行单元，用于用第二平台的模拟器或真机来运行此react-native项目；
第一调整单元，用于调整styles属性中的参数并在第一平台的应用中观察第二UI组件的变化直至达到预期的显示效果；
第二调整单元，用于观察第二平台的应用中第二UI组件的显示效果是否与在第一平台的显示效果一致，若不一致则继续调整styles属性中的参数，直至达到第二UI组件在第一平台和第二平台显示效果一致；
配置导出单元，用于配置Component中的Props参数并导出第二UI组件待用。
步骤21至步骤29可以由封装模块或者封装模块内的单元作为步骤的执行对象，具体地，步骤21由项目创建单元作为步骤的执行对象，步骤22由第一组件引入单元作为步骤的执行对象，步骤23由第二组件引入单元作为步骤的执行对象，步骤24由构造单元作为步骤的执行对象，步骤25由第一运行单元作为步骤的执行对象，步骤26由第二运行单元作为步骤的执行对象，步骤27由第一调整单元作为步骤的执行对象，步骤28由第二调整单元作为步骤的执行对象，步骤29由配置导出单元作为步骤的执行对象。
步骤21中，项目创建单元先创建一个可在react-native环境下使用的库项目。项目中包括一个iOS的工程和一个Android的工程以及一个NodeJS的配置文件和JS源码目录。可以使用各个平台的创建方法依次创建这些工程。
不再引入react-native原有的组件，而是利用它最基础的View组件或其他组件来实现我们想要的效果。例如react-native原有的Toast组件仅能在Android平台下使用，即以第二UI组件为Toast组件为例，为了在iOS平台上也可以使用此组件，我们新建一个名为CRToast的类。进而分析原有的Toast组件我们得知其是由Android原生的组件导出给react-native使用的，所以我们需要将其改写为纯react-native上的组件才可以实现显示效果一致的目的。
步骤22中，第一组件引入单元首先引入react-native的View组件并继承react的Component类，由于View组件是一个基础组件，并且在iOS平台与Android平台上的显示效果完全一致，所以通常利用它来作为各种组件的容器。
步骤23中，第二组件引入单元从react-native中引入Text组件，并添加到View组件内。
步骤24中，构造单元构造一个对象放入View组件的styles属性中，styles属性是react-native组件中的一个固有属性。构造的这个对象遵循styles属性的类型约束，有width、height和border在内的一个或多个与显示效果相关的参数。
步骤25中，打开iOS平台对应的模拟器或者真实手机，运行此react-native项目。
步骤26中，打开Android平台对应的模拟器或者真实手机，运行此react-native项目。
步骤27中，第一调整单元调整styles属性中的参数，然后在iOS平台的应用中观察UI组件的变化，直至达到预期的显示效果。
步骤28中，第二调整单元确定Android平台的应用中UI组件的显示效果是否与在iOS平台的显示效果一致，若不一致则继续调整参数，直至达到UI组件在iOS平台和Android平台显示效果一致。
进一步地，如果无法通过同一个参数达成一致则根据不同平台配置不同的参数，具体地，步骤28包括：第二调整单元确定第二平台的应用中第二UI组件的显示效果是否与在第一平台的显示效果一致，若不一致则继续调整styles属性中的参数，如果无法通过调整同一个参数达成第一平台和第二平台的显示效果一致，则引入react-native中的Plateform组件，使用判断语法判断不同平台然后配置不同的参数与平台相对应，直至达到第二UI组件在第一平台和第二平台显示效果一致。即确定Android平台的应用中UI组件的显示效果是否与在iOS平台该UI组件的显示效果一致，若不一致则继续调整参数，如果无法通过同一个参数达成一致，则引入react-native中的Plateform组件，使用判断语法判断不同平台，然后配置不同的参数，最终达到该UI组件在Android平台和iOS平台显示效果一致的目的。
步骤29，配置导出单元配置Component中的Props参数，使之与Toast组件相同。再使用JS提供的导出方法导出组件待用。至此已经实现了一个可以在iOS平台和Android平台显示效果一致的Toast组件。
具体地，显示效果不一致的组件是根据需求的不同，修改style属性也是根据需求不同进行修改，比如颜色不同那就改颜色，形状不同就改形状；显示效果可以通过人眼观察UI元素在模拟平台上的显示效果是否一致。
综上所述，本发明实施方式的UI显示效果一致性的处理方法与***，针对不同平台间参数配置不一致的情况，将所有react-native原有的UI库封装；针对只实现了某一平台的组件，而缺少另一平台的导致另一平台无法使用的情况，重新实现缺少的UI组件，从而将显示不一致的地方修正，达到各个平台的UI显示效果保持一致。
在本发明的实施方式的描述中，术语“第一”、“第二”仅用于描述目的，而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个所述特征。在本发明的实施方式的描述中，“多个”的含义是两个或两个以上，除非另有明确具体的限定。
下文的公开提供了许多不同的实施方式或例子用来实现本发明的实施方式的不同结构。为了简化本发明的实施方式的公开，下文中对特定例子的部件和设置进行描述。当然，它们仅仅为示例，并且目的不在于限制本发明。此外，本发明的实施方式可以在不同例子中重复参考数字和/或参考字母，这种重复是为了简化和清楚的目的，其本身不指示所讨论各种实施方式和/或设置之间的关系。此外，本发明的实施方式提供了的各种特定的工艺和材料的例子，但是本领域普通技术人员可以意识到其他工艺的应用和/或其他材料的使用。
在本说明书的描述中，参考术语“一个实施方式”、“一些实施方式”、“示意性实施方式”、“示例”、“具体示例”或“一些示例”等的描述意指结合所述实施方式或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施方式或示例中。在本说明书中，对上述术语的示意性表述不一定指的是相同的实施方式或示例。而且，描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施方式或示例中以合适的方式结合。
流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为，表示包括一个或更多个用于实现特定逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分，并且本发明的优选实施方式的范围包括另外的实现，其中可以不按所示出或讨论的顺序，包括根据所涉及的功能按基本同时的方式或按相反的顺序，来执行功能，这应被本发明的实施例所属技术领域的技术人员所理解。
在流程图中表示或在此以其他方式描述的逻辑和/或步骤，例如，可以被认为是用于实现逻辑功能的可执行指令的定序列表，可以具体实现在任何计算机可读介质中，以供指令执行***、装置或设备(如基于计算机的***、包括处理模块的***或其他可以从指令执行***、装置或设备取指令并执行指令的***)使用，或结合这些指令执行***、装置或设备而使用。就本说明书而言，"计算机可读介质"可以是任何可以包含、存储、通信、传播或传输程序以供指令执行***、装置或设备或结合这些指令执行***、装置或设备而使用的装置。计算机可读介质的更具体的示例(非穷尽性列表)包括以下：具有一个或多个布线的电连接部(电子装置)，便携式计算机盘盒(磁装置)，随机存取存储器(RAM)，只读存储器(ROM)，可擦除可编辑只读存储器(EPROM或闪速存储器)，光纤装置，以及便携式光盘只读存储器(CDROM)。另外，计算机可读介质甚至可以是可在其上打印所述程序的纸或其他合适的介质，因为可以例如通过对纸或其他介质进行光学扫描，接着进行编辑、解译或必要时以其他合适方式进行处理来以电子方式获得所述程序，然后将其存储在计算机存储器中。
应当理解，本发明的实施方式的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中，多个步骤或方法可以用存储在存储器中且由合适的指令执行***执行的软件或固件来实现。例如，如果用硬件来实现，和在另一实施方式中一样，可用本领域公知的下列技术中的任一项或他们的组合来实现：具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路，具有合适的组合逻辑门电路的专用集成电路，可编程门阵列(PGA)，现场可编程门阵列(FPGA)等。
本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成，所述的程序可以存储于一种计算机可读存储介质中，该程序在执行时，包括方法实施例的步骤之一或其组合。此外，在本发明的各个实施例中的各功能单元可以集成在一个处理模块中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，也可以存储在一个计算机可读取存储介质中。
上述提到的存储介质可以是只读存储器，磁盘或光盘等。
尽管上面已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型。
Claims (10)
1.一种UI显示效果一致性的处理方法，其特征在于，包括：
步骤1，对react-native中第一平台和第二平台间参数配置不一致的第一UI组件进行封装，使封装后的第一UI组件可以在第一平台和第二平台显示效果一致；
步骤2，确定react-native中缺少第一平台对应的第二UI组件，则重新实现一个第二UI组件，使该第二UI组件可以在第一平台和第二平台显示效果一致。
2.如权利要求1所述UI显示效果一致性的处理方法，其特征在于，步骤1包括：
步骤11，创建一个可在react-native环境下使用的项目；该项目包括一个第一平台的工程和一个第二平台的工程以及一个NodeJS的配置文件和JS源码目录；
步骤12，对react-native中第一平台和第二平台间参数配置不一致的第一UI组件，新建一个名称与第一UI组件名称不同的JS文件，在该JS文件中引入react-native的第一UI组件；
步骤13，新建一个与JS文件同名的类来继承react的Component类，重载Component类中的render方法，把引入的第一UI组件初始化后作为返回值返回到render方法中；其中，第一UI组件初始化的参数中配置styles属性来调整包括width、height和border在内的一个或多个与显示效果相关的参数；
步骤14，使用第一平台的模拟器或真机来运行此react-native项目；
步骤15，使用第二平台的模拟器或真机来运行此react-native项目；
步骤16，调整styles属性中的参数并在第一平台的应用中观察第一UI组件的变化直至达到预期的显示效果；
步骤17，观察第二平台的应用中第一UI组件的显示效果是否与在第一平台的显示效果一致，若不一致则继续调整styles属性中的参数，直至达到第一UI组件在第一平台和第二平台显示效果一致；
步骤18，对除第一UI组件外的其他UI组件按第一UI组件的调整方式进行调整，使得其他UI组件在第一平台和第二平台显示效果一致；
步骤19，将调整好的所有UI组件导出待用，并完成封装。
3.如权利要求2所述UI显示效果一致性的处理方法，其特征在于，步骤17包括：观察第二平台的应用中第一UI组件的显示效果是否与在第一平台的显示效果一致，若不一致则继续调整styles属性中的参数，如果无法通过调整同一个参数达成第一平台和第二平台的显示效果一致，则引入react-native中的Plateform组件，使用判断语法判断不同平台然后配置不同的参数与平台相对应，直至达到第一UI组件在第一平台和第二平台显示效果一致。
4.如权利要求1所述UI显示效果一致性的处理方法，其特征在于，步骤2包括：
步骤21，创建一个可在react-native环境下使用的项目；该项目包括一个第一平台的工程和一个第二平台的工程以及一个NodeJS的配置文件和JS源码目录；
步骤22，对react-native中仅在第二平台下使用的第二UI组件，该第二UI组件是react-native中缺少与第一平台对应的UI组件，引入react-native的View组件并继承react的Component类；
步骤23，从react-native中引入Text组件，并添加到View组件内；
步骤24，构造一个对象放入View组件的styles属性；其中，可配置styles属性来调整包括width、height和border在内的一个或多个与显示效果相关的参数；
步骤25，使用第一平台的模拟器或真机来运行此react-native项目；
步骤26，使用第二平台的模拟器或真机来运行此react-native项目；
步骤27，调整styles属性中的参数并在第一平台的应用中观察第二UI组件的变化直至达到预期的显示效果；
步骤28，观察第二平台的应用中第二UI组件的显示效果是否与在第一平台的显示效果一致，若不一致则继续调整styles属性中的参数，直至达到第二UI组件在第一平台和第二平台显示效果一致；
步骤29，配置Component中的Props参数并导出第二UI组件待用。
5.如权利要求4所述UI显示效果一致性的处理方法，其特征在于，步骤28包括：观察第二平台的应用中第二UI组件的显示效果是否与在第一平台的显示效果一致，若不一致则继续调整styles属性中的参数，如果无法通过调整同一个参数达成第一平台和第二平台的显示效果一致，则引入react-native中的Plateform组件，使用判断语法判断不同平台然后配置不同的参数与平台相对应，直至达到第二UI组件在第一平台和第二平台显示效果一致。
6.一种UI显示效果一致性的处理***，其特征在于，包括：
封装模块，用于对react-native中第一平台和第二平台间参数配置不一致的第一UI组件进行封装，使封装后的第一UI组件可以在第一平台和第二平台显示效果一致；
实现模块，用于确定react-native中缺少第一平台对应的第二UI组件，则重新实现一个第二UI组件，使该第二UI组件可以在第一平台和第二平台显示效果一致。
7.如权利要求6所述UI显示效果一致性的处理***，其特征在于，封装模块包括：
项目创建单元，用于创建一个可在react-native环境下使用的项目；该项目包括一个第一平台的工程和一个第二平台的工程以及一个NodeJS的配置文件和JS源码目录；
文件新建单元，用于对react-native中第一平台和第二平台间参数配置不一致的第一UI组件，新建一个名称与第一UI组件名称不同的JS文件，在该JS文件中引入react-native的第一UI组件；
类新建单元，用于新建一个与JS文件同名的类来继承react的Component类，重载Component类中的render方法，把引入的第一UI组件初始化后作为返回值返回到render方法中；其中，第一UI组件初始化的参数中配置styles属性来调整包括width、height和border在内的一个或多个与显示效果相关的参数；
第一运行单元，用于使用第一平台的模拟器或真机来运行此react-native项目；
第二运行单元，用于使用第二平台的模拟器或真机来运行此react-native项目；
第一调整单元，用于调整styles属性中的参数并在第一平台的应用中观察第一UI组件的变化直至达到预期的显示效果；
第二调整单元，用于观察第二平台的应用中第一UI组件的显示效果是否与在第一平台的显示效果一致，若不一致则继续调整styles属性中的参数，直至达到第一UI组件在第一平台和第二平台显示效果一致；
其他调整单元，用于对除第一UI组件外的其他UI组件按第一UI组件的调整方式进行调整，使得其他UI组件在第一平台和第二平台显示效果一致；
导出封装单元，用于将调整好的所有UI组件导出待用，并完成封装。
8.如权利要求7所述UI显示效果一致性的处理***，其特征在于，第二调整单元具体用于观察第二平台的应用中第一UI组件的显示效果是否与在第一平台的显示效果一致，若不一致则继续调整styles属性中的参数，如果无法通过调整同一个参数达成第一平台和第二平台的显示效果一致，则引入react-native中的Plateform组件，使用判断语法判断不同平台然后配置不同的参数与平台相对应，直至达到第一UI组件在第一平台和第二平台显示效果一致。
9.如权利要求6所述UI显示效果一致性的处理***，其特征在于，实现模块包括：
项目创建单元，用于创建一个可在react-native环境下使用的项目；该项目包括一个第一平台的工程和一个第二平台的工程以及一个NodeJS的配置文件和JS源码目录；
第一组件引入单元，用于对react-native中仅在第二平台下使用的第二UI组件，该第二UI组件是react-native中缺少与第一平台对应的UI组件，引入react-native的View组件并继承react的Component类；
第二组件引入单元，用于从react-native中引入Text组件，并添加到View组件内；
构造单元，用于构造一个对象放入View组件的styles属性；其中，可配置styles属性来调整包括width、height和border在内的一个或多个与显示效果相关的参数；
第一运行单元，用于使用第一平台的模拟器或真机来运行此react-native项目；
第二运行单元，用于用第二平台的模拟器或真机来运行此react-native项目；
第一调整单元，用于调整styles属性中的参数并在第一平台的应用中观察第二UI组件的变化直至达到预期的显示效果；
第二调整单元，用于观察第二平台的应用中第二UI组件的显示效果是否与在第一平台的显示效果一致，若不一致则继续调整styles属性中的参数，直至达到第二UI组件在第一平台和第二平台显示效果一致；
配置导出单元，用于配置Component中的Props参数并导出第二UI组件待用。
10.如权利要求9所述UI显示效果一致性的处理***，其特征在于，第二调整单元具体用于观察第二平台的应用中第二UI组件的显示效果是否与在第一平台的显示效果一致，若不一致则继续调整styles属性中的参数，如果无法通过调整同一个参数达成第一平台和第二平台的显示效果一致，则引入react-native中的Plateform组件，使用判断语法判断不同平台然后配置不同的参数与平台相对应，直至达到第二UI组件在第一平台和第二平台显示效果一致。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910202553.8A CN109976756B (zh) | 2019-03-11 | 2019-03-11 | Ui显示效果一致性的处理方法与*** |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910202553.8A CN109976756B (zh) | 2019-03-11 | 2019-03-11 | Ui显示效果一致性的处理方法与*** |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109976756A true CN109976756A (zh) | 2019-07-05 |
| CN109976756B CN109976756B (zh) | 2022-11-11 |
Family
ID=67079206
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910202553.8A Active CN109976756B (zh) | 2019-03-11 | 2019-03-11 | Ui显示效果一致性的处理方法与*** |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109976756B (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115982374A (zh) * | 2022-12-02 | 2023-04-18 | 河海大学 | 大坝应急响应知识库联动的多视角学习实体对齐方法和*** |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102495735A (zh) * | 2011-12-14 | 2012-06-13 | 方正国际软件有限公司 | web 端UI组件应用框架*** |
| CN104881318A (zh) * | 2015-05-07 | 2015-09-02 | 北京金山安全软件有限公司 | 一种接口调用方法、装置及终端 |
| CN106528118A (zh) * | 2016-11-02 | 2017-03-22 | 浪潮（苏州）金融技术服务有限公司 | 一种模态和非模态窗口在浏览器中兼容性的解决方法 |
| US20170091159A1 (en) * | 2015-09-25 | 2017-03-30 | Yahoo! Inc. | Programmatic native rendering of structured content |
| CN108228288A (zh) * | 2016-12-22 | 2018-06-29 | 航天信息股份有限公司 | 一种组件***及其调用方法和装置 |
-
2019
- 2019-03-11 CN CN201910202553.8A patent/CN109976756B/zh active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102495735A (zh) * | 2011-12-14 | 2012-06-13 | 方正国际软件有限公司 | web 端UI组件应用框架*** |
| CN104881318A (zh) * | 2015-05-07 | 2015-09-02 | 北京金山安全软件有限公司 | 一种接口调用方法、装置及终端 |
| US20170091159A1 (en) * | 2015-09-25 | 2017-03-30 | Yahoo! Inc. | Programmatic native rendering of structured content |
| CN106528118A (zh) * | 2016-11-02 | 2017-03-22 | 浪潮（苏州）金融技术服务有限公司 | 一种模态和非模态窗口在浏览器中兼容性的解决方法 |
| CN108228288A (zh) * | 2016-12-22 | 2018-06-29 | 航天信息股份有限公司 | 一种组件***及其调用方法和装置 |
Non-Patent Citations (1)
| Title |
|---|
| 胡晓越: ""Web前端UI框架的设计与实现"", 《中国优秀硕士学位论文全文数据库信息科技辑》 * |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115982374A (zh) * | 2022-12-02 | 2023-04-18 | 河海大学 | 大坝应急响应知识库联动的多视角学习实体对齐方法和*** |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109976756B (zh) | 2022-11-11 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106293664A (zh) | 代码生成方法及装置 | |
| US20100275173A1 (en) | Model For a Hardware Device-Independent Method of Defining Embedded Firmware for Programmable Systems | |
| CN104679532B (zh) | 内核模块加载方法和装置 | |
| CN106919410A (zh) | 组件的布局模板的扩展方法和装置 | |
| US11256484B2 (en) | Utilizing natural language understanding and machine learning to generate an application | |
| CN105404507A (zh) | 一种流程模板的构建方法及*** | |
| CN101770423A (zh) | 一种测试数据生成方法及测试*** | |
| CN105786924A (zh) | 网页夜间模式处理方法、装置及移动终端 | |
| CN104267934B (zh) | 信息的展现方法、装置和移动终端 | |
| CN110580174B (zh) | 应用组件生成方法、服务器及终端 | |
| CN106227666A (zh) | 一种基于大数据的自动化测试方法及*** | |
| CN105591825B (zh) | 在家庭网关升级时修改配置的方法 | |
| CN107171897A (zh) | 一种接口测试方法及数据接口测试*** | |
| CN104834510A (zh) | Can协议代码源文件的生成方法和装置 | |
| CN109976756A (zh) | Ui显示效果一致性的处理方法与*** | |
| CN109542431A (zh) | 控件属性分析方法、装置、电子设备及存储介质 | |
| CN108073390A (zh) | 统一管理多个工程中配置文件的方法、装置及*** | |
| CN109508222A (zh) | 一种状态栏的颜色配置方法及相关设备 | |
| BR112021009093A2 (pt) | sistema de desenvolvimento de website, e método para um sistema de desenvolvimento de website | |
| CN107402786A (zh) | 应用更新方法及装置 | |
| CN109739526A (zh) | 代码更新方法和装置 | |
| CN106793012A (zh) | 一种家庭网关设备中实现wifi配置管理的方法 | |
| CN108647011A (zh) | 一种无限层级树控件的实现 | |
| CN105808748B (zh) | 一种mib版本对比方法和装置 | |
| CN108255503A (zh) | 测量仪器的固件升级方法及装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |