背景
我們?cè)谟胷n的時(shí)候會(huì)用到一些第三方的UI庫诵冒，比如說Ant Design Mobile仙辟，但是編寫代碼的時(shí)候雄右，卻發(fā)現(xiàn)往往有的一些屬性，雖然設(shè)置了但是不能覆蓋原有Style巷送，這里我介紹一種通用的解決辦法來覆蓋不能正常更改的Style驶忌，以Button設(shè)置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;
}
}
方法實(shí)現(xiàn)
class Test extends Component {
render() {
return (
<View style={commonStyle.wrapper}>
<Button
styles={WidgetStyles.getButtonStyles()}
type={'primary'}
>立即登錄</Button>
</View>
)
}
}
解決思路
- 獲取默認(rèn)Button的Style笑跛，并賦值給自己的變量
- 修改自己的變量付魔，滿足自己的要求
- 把修改過的變量再完全賦值給組件
結(jié)語
大致的方法就是這樣，有一點(diǎn)需要提醒一下飞蹂，cssType需要自己看源碼几苍，找到對(duì)應(yīng)的名稱，謝謝大家觀看陈哑！
