A method for non-invasively implementing the switching of the font size of an App

Abstract

The present invention discloses a method for non-invasively implementing the switching of the font size of an App, which is characterized in that it includes developing the App globally using a preset preference level as the design specification, adding the preference level and the modification method to the Provider component so that child nodes at any level can obtain the corresponding values; overriding the render function of the Text component, using the hook technology to obtain the preference level of the current font size, obtaining the style attributes of the render function, adjusting the style attributes rendered by the native Text component, and when the Provider value of the ancestor node changes, the render function of the Text component re-renders according to the new preference level. The effect of non-invasively implementing the font size switching function is achieved, fundamentally solving the problems of large workload, high code intrusion, easy omission, and the need for continuous investment in adapting the font size during the development and maintenance of new functions in the traditional method.

Description

Technical Field

[0001] The present invention relates to the technical field of React Native mobile cross-platform, and particularly to a method for non-intrusively implementing the switching of the font size of an App. Background Art

[0002] The user group of mobile App covers various age groups. Older users generally prefer slightly larger fonts. In order to meet the font size preferences of users of all age groups and improve the user experience, it is necessary to implement the function of switching the font size in the App.

[0003] Although the Context has been applied to the display of UI data in the prior art, there is no mature and reliable technology for the specific transformation of the font size. The common practice is that the root component provides the font "preference level" information, and the page obtains the font "preference level" through the Context, and then sets the font size style of each Text component through a conversion function. Each page that needs to be adapted needs to import the conversion function. This method has the following defects. First, each page needs to repeatedly process these logics that have nothing to do with the business code, which is highly invasive to the business code. Second, the workload is large. Each time a new page is added, it needs to be adapted, and it cannot achieve a once-and-for-all effect. The development and maintenance costs are high, and it is easy for developers to miss the style processing. If the function of switching the font size is added later, all pages and components need to be adjusted, which is likely to cause stability problems of the application. Finally, when using third-party components and pages, these components and pages cannot be automatically adapted according to the font size "preference level".

[0004] Therefore, a better way to implement the switching of the font size of the App is needed to eliminate the defects of the prior art and reduce the development and maintenance costs. Summary of the Invention

[0005] The technical problem to be solved by the present invention is to overcome the deficiencies of the prior art and provide a method for non-intrusively implementing the switching of the font size of an App.

[0006] To solve the above technical problem, the present invention provides a method for non-intrusively implementing the switching of the font size of an App, which is characterized by including the following steps:

[0007] Step 1: The App is developed globally using the preset font size preference level as the design specification. The preference level includes the standard level. When starting up, the user-set preference level is loaded. If it fails, the standard level is loaded. The preference level and the modification method are added to the Provider component of the ThemeContext at the root node of the App through the Context component of React-Native, so that any level of child nodes can obtain the corresponding values;

[0008] Step 2: Save the rendering function render of the native Text component to the originRender variable, and rewrite the rendering function render of the native Text component. In the rewritten rendering function render, use React-Native Hook to obtain the current font size preference level, obtain the style attribute style of the props parameter of the rendering function render, traverse and find the value of fontSize in the style attribute style, and adjust the style attribute rendered by the native Text component according to fontSize and the font size preference level. The adjustment includes making the value of fontSize equal to the preference level according to the difference between the configured preference level and the standard level. When the current preference level is the standard, no adjustment is made. Apply the adjusted fontSize style to the saved originRender variable;

[0009] Step 3: Provide an entry for setting the preference level in the App. When the App detects a change in the preference level, obtain the modification method in the Context component of Step 1 and save it locally, so that when the App is started next time, the value of the preference level can be read through Step 1. When the value of the Provider of the ancestor node changes, the rendering function render re-renders according to the new preference level.

[0010] In Step 2, the React-Native Hook is specifically const theme =

[0011] useContext(ThemeContext). The adjustment of the style attribute rendered by the native Text component also includes: the props of the native Text component are set with custom attributes, and the custom attributes are used to control whether to ignore the preference level. If the preference level is ignored, no adjustment is made.

[0012] In Step 2, rewriting the rendering function render of the Text component is also used to set the general Text component style, and the general Text component style includes custom fonts.

[0013] The beneficial effects achieved by the present invention:

[0014] By rewriting the render method of the Text component and based on the Hook technology of React Native, the present invention can implement the font size switching function without modifying the existing page code and without intrusion.

[0015] After one-time implementation, subsequent function development and maintenance do not need to consider the adaptation work of font size switching, fundamentally solving the problems of large workload, high code intrusion, easy omission in traditional methods, and the need for continuous investment in adapting font size during new function development and maintenance. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] Figure 1 It is a schematic flowchart of a specific process in an exemplary embodiment of the present invention. DETAILED DESCRIPTION OF THE EMBODIMENTS

[0017] The present invention will be further described below in conjunction with the drawings and exemplary embodiments:

[0018] As Figure 1 shown, it is a flowchart of a method for non-intrusively implementing the switching of the App font size in an embodiment of the present invention. The specific steps are as follows:

[0019] Step 1: Load the font size preference level. Define the "preference level" of the font size, and the preference level includes small, standard, large, etc. The App globally uses the standard "preference level" as the design specification for development, and loads the font size "preference level" set by the user at startup. As shown in the specific flowchart of the present embodiment in Figure 1 shown, determine whether the "preference level" exists. If not, use the standard preference, that is, if it fails, load the standard level. If so, add the "preference level" of the font size and the modification method to the Provider component of ThemeContext at the root node of the App through React-Native Context technology, and set the current font size preference and the method for modifying the font size with ThemeContext.Provider, so that any level of child nodes can obtain the corresponding values. The code is as follows

[0020] const ThemeContext = React.createContext(); ....

[0022] <ThemeContext.Provider

[0023] value={{

[0024] fontLevel:this.state.fontLevel,

[0025] changeFontLevel:this.onChangeFontLevel,

[0026] }}> ....

[0028] < / ThemeContext.Provider>

[0029] Step 2: Rewrite the render method of the Text component. As shown in the specific flowchart of this embodiment shown in Figure 1 Rewrite the render method of the Text component. Save the render function render of the Text component to the originRender variable, and rewrite the render function render of the Text component. In the rewritten render function render, use the React-Native Hook technology const theme = useContext(ThemeContext) to obtain the "preference level" of the current font size. Rewriting the render function render of the Text component can not only modify the font size, but also set other common Text component styles such as custom fonts. The Hook technology can only be used in functional components. If the page is a class component, it cannot be used. We break through the limitation of using the Hook technology by rewriting the render function render of the native component Text, so that the UI page does not need to obtain the font preference level through the Context method to set the font size style of the Text component. The page using the Text component does not need to handle any adaptation work related to the "preference level" of the font size, achieving the purpose of zero intrusion and zero awareness of the font preference level on the UI page. When the "preference level" of the font size changes, such as when the font size preference changes as shown in the specific flowchart of this embodiment shown in Figure 1 Refresh the Text component. The business code does not need to be changed at all. Obtain the style attribute style of the render function render props parameter, traverse and find the fontSize value in the style attribute style, and adjust the font size style rendered by the Text component according to the fontSize and the "preference level" of the font size. Set the font size according to the difference between the configured font "preference level" and the "standard level", as shown in Figure 1In the specific flowchart of the present embodiment shown, according to the Text component, the fontSize is adjusted according to the fontSize in the style and the latest font size preference. For example, when the difference in each preference level is 2, when the current "preference level" is the small font size, fontSize = the font size of the Text style found by traversal - 2; when the current "preference level" is the large font size, fontSize = the font size of the Text style found by traversal + 2; when the current "preference level" is standard or the props of the Text component set a custom property ignoreFontLevel (used to control whether to ignore the preference level), no adjustment is made, and the adjusted fontSize style is applied to the saved originRender method.

[0030] Step 3: Set the "preference level" of the font size. An entry for setting the "preference level" of the font size is provided in the App, such as in Figure 1 the font size preference setting page in the specific flowchart of the present embodiment shown. After the user sets the "preference level" of the font size, when the App monitors that the user changes the "preference level" of the font size, the method provided by the ContextProvider in Step 1 is used to change the "preference level" of the font size and save it locally. When the App is started next time, Step 1 can read this value. Since the overridden render function render of the Text uses the Hook technology, when the Provider value of the ancestor node changes, it will automatically re-render according to the new "preference level" of the font size. The code is as follows:

[0031] <ThemeContext.Consumer>

[0032] {({fontLevel, changeFontLevel}) => (

[0033] <Slider onValueChange={changeFontLevel} / >

[0034] )}

[0035] < / ThemeContext.Consumer>

[0036] The present invention is mainly used to provide a method for non-intrusively implementing the switching of the App font size in React Native. Compared with the prior art, its significant advantages are:

[0037] By overriding the render method of the Text component and based on the Hook technology of React Native, the present invention can implement the font size switching function without modifying the existing page code.

[0038] After one-time implementation, subsequent function development and maintenance do not need to consider the adaptation work for font size switching, fundamentally solving the problems of large workload, high code intrusion, easy omission in the traditional method, and the need for continuous investment in adapting font size during new function development and maintenance.

[0039] The above embodiments do not limit the present invention in any way. Any other improvements and applications made to the above embodiments by equivalent transformation belong to the protection scope of the present invention.

Claims

1. A method for non-invasively implementing the switching of the font size of an App, characterized in that, It includes the following steps: Step 1: The App is developed for the design specification with the preference level of the preset font size globally. The preference level includes the standard level. When starting up, the user-set preference level is loaded. If it fails, the standard level is loaded. The preference level and the modification method are added to the Provider component of the ThemeContext at the root node of the App through the Context component of React-Native, so that child nodes at any level can obtain the corresponding values; Step 2: Save the render function render of the native Text component to the originRender variable, and rewrite the render function render of the native Text component. In the rewritten render function render, the React-Native Hook is used to obtain the current preference level of the font size, obtain the style attribute style of the props parameter of the render function render, traverse and find the value of fontSize in the style attribute style, and adjust the style attribute rendered by the native Text component according to fontSize and the preference level of the font size. The adjustment includes making the value of fontSize equal to the preference level according to the difference between the configured preference level and the standard level. When the current preference level is the standard, no adjustment is made. Apply the adjusted fontSize style to the saved originRender variable; Step 3: Provide an entry for setting the preference level within the App. When the App detects a change in the preference level, obtain the modification method in the Context component in Step 1 and save it locally, so that when the App is started next time, the value of the preference level can be read through Step 1. When the value of the Provider of the ancestor node changes, the render function render is re-rendered according to the new preference level.

2. The method for non-invasively implementing switching of the App font size according to claim 1, wherein: In Step 2, the React-Native Hook is specifically const theme = useContext(ThemeContext). The adjustment of the style attribute rendered by the native Text component also includes: the props of the native Text component are set with custom attributes, and the custom attributes are used to control whether to ignore the preference level. If the preference level is ignored, no adjustment is made.

3. The method for realizing the switching of the App font size without intrusion according to claim 2, wherein: The rewrite of the render function render of the Text component in Step 2 is also used to set the general Text component style, and the general Text component style includes custom fonts.

Images