Author: IPlayCodex Warehouse: Github, codePen Blog: Nugget, SegmentFault, Zhihu, Jianshushu, Blogpark, LeetCode Public account: FEZONE contact me: [email protected] Special statement: Original is not easy, unauthorized shall not be reproduced or copied this article, otherwise according to infringement treatment, if you need to reprint or open the public number white list can contact me, respect the original respect for intellectual property rights from me

Problem 1.

When we do web development, we know that tags have their own default styles, such as

,

, etc. So the first thing we do when we’re developing a project is to clear the default style of the tag. . For example, using the reset CSS | | normalize. CSS. While developing RN, I found the default properties of some components annoying. Again, you need to override these default properties. Such as:

<Text /> <TextInput />
Copy the code

AllowFontScaling =true for both components means that the default property follows the system font size, which is extremely frustrating.

And this component:

<TouchableOpacity />
Copy the code

This component has a shadow effect when clicked by default, because its default opacity is 0.2.

These default properties can sometimes cause us a lot of trouble, and some components have properties with default values that are not what we want. So what to do? Manually modify the property values of this component every time you use it?

That would satisfy demand, but it would be stupid. Some property values need to be modified each time the above components are used. Too stupid. This method is abandoned.

2. Solutions:

Let’s explore the root of this problem and how to solve it, using the Text component as a starting point

Now that we know what’s causing the problem, we can begin to fix it. According to the official documents of React-Native, two components are commonly used to display Text in React-Native: Text and TextInput. So, as long as we do a good job with these two components, the font size problem is basically solved

And they both have a property in common, allowFontScaling, which has a value pattern of true. What does that mean?

Whether to change with the system-specified text size. The default value is true

2.1. Solution 1: SetallowFontScalingProperties forfalse

// Set this property to false<Text allowFontScaling="{false}" />
<TextInput allowFontScaling="{false}" />
Copy the code

The downside of this method, however, is that you have to set this property to false every time you use the Text TextInput component, which is a bit of a hassle, in case you forget. It blew up again.

2.2. Solution 2: Encapsulate nativeTextandTextInputcomponent

It’s annoying to have to set this property to false every time you use the Text or TextInput component, so you can’t help but think of wrapping a public component like this:

import React from "react";
import { Text } from "react-native";

export default class MyText extends React.Component {
    // Encapsulates the React-native component as MyText
    render() {
        return (
            <Text allowFontScaling={false} {. this.props} >
                {this.props.children}
            </Text>); }}Copy the code

The same goes for the TextInput component

This solves the problem by using wrapped MyText every time you use the Text component. But isn’t that more trouble? You also need to import this component every time you use it, in case you forget it and blow it up again! This plan passes!

2.3. Solution 3: Modify componentdefaultProps

Take a look at the component’s source code:

TextInput

. getDefaultProps():Object {
    return {
      allowFontScaling: true.underlineColorAndroid: 'transparent'}; },...Copy the code

Text

.static defaultProps = {
    accessible: true.allowFontScaling: true.ellipsizeMode: 'tail'}; .Copy the code

As you can see from these two code snippets, when you define Text and TextInput, you set default properties for the component. Then there’s the solution:

TextInput.defaultProps = Object.assign({}, TextInput.defaultProps, {
    defaultProps: false}); Text.defaultProps =Object.assign({}, Text.defaultProps, {
    allowFontScaling: false}); TouchableOpacity.defaultProps =Object.assign(
    {},
    TouchableOpacity.defaultProps,
    { activeOpacity: 1});Copy the code

Remember to write this code in your React-native entry. I wrote it in index.js. Using this method really achieves once and for all, so this method is the most convenient.

3. The conclusion

❤️ attention + likes + favorites + comments + forwarding ❤️ original is not easy, encourage the author to create better articles ~