背景

我们在用rn的时候会用到一些第三方的UI库，比如说Ant Design Mobile，但是编写代码的时候，却发现往往有的一些属性，虽然设置了但是不能覆盖原有Style，这里我介绍一种通用的解决办法来覆盖不能正常更改的Style，以Button设置fontSize为例展开。

方法类

/**
 * @author: liy_lmn
 * @date: 2019-10-12
 * @description: 修改第三方组件Style
 */

/**
 * @param newObj  自己的style
 * @param style   第三方组件的style
 * @param data    要修改的组件cssType,key和value
 */
import {StyleSheet} from 'react-native';

export function changeStyle(newObj, style, data) {
    for (let key in style) {
        if (Object.prototype.hasOwnProperty.call(style, key)) {
            newObj[key] = {...StyleSheet.flatten(style[key])};
            if (data.length > 0) {
                data.map((item, index) => {
                    if (key === item.cssType) {
                        item.val.map((items, indexs) => {
                            newObj[key][items.key] = items.value;
                        })
                    }
                })
            }
        }
    }

}

获取新的style

import defaultThemes from '@ant-design/react-native/lib/style/themes/default';
import {setSpText} from "./AutoLayout";
import {changeStyle} from "./ChangeStyle";
import buttonStyle from "@ant-design/react-native/lib/button/style";
/**
* @author: liy_lmn
* @date: 2019-10-14
* @description: 获取第三方组件自定义样式newStyle的util
*/
const data_button =
    [
        {
            cssType: 'largeRawText', // 要改的样式的类名字
            val: [{key: 'fontSize', value: setSpText(14)}] // 要更改或添加的样式 key 为样式名称, value为值
        }
    ]

export default class WidgetStyles {
    /**
     * 获取自定义Button的style
     */
    static getButtonStyles(){
        const newStyle={};
        changeStyle(newStyle, buttonStyle(defaultThemes), data_button);
        return newStyle;
    }
}

方法实现

class Test extends Component {
    render() {
        return (
            <View style={commonStyle.wrapper}>
                <Button
                    styles={WidgetStyles.getButtonStyles()}
                    type={'primary'}
                >立即登录</Button>
            </View>
        )
    }
}

解决思路

• 获取默认Button的Style，并赋值给自己的变量
• 修改自己的变量，满足自己的要求
• 把修改过的变量再完全赋值给组件

结语

大致的方法就是这样，有一点需要提醒一下，cssType需要自己看源码，找到对应的名称，谢谢大家观看！

感谢作者 情怀的程序猿：
https://www.jianshu.com/p/70b46e305914