背景
我们在用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需要自己看源码，找到对应的名称，谢谢大家观看！
