因為原生這邊有個換膚功能，用戶下載對應(yīng)的皮膚包，app會重新渲染一些頁面元素色值贱鄙，以及替換相關(guān)圖片。某一天產(chǎn)品跑來說姨谷，RN的頁面也要支持換膚哦逗宁。雖然我默默的從抽屜里拿出來一把caidao。但還是要去想辦法把它搞掉梦湘。
思路如下：
1.先去看看原生那邊換膚是怎么玩的瞎颗。
- 點開app下載一個皮膚包。會從服務(wù)器請求一個zip壓縮包捌议。
- 解壓縮打開哼拔，一份色值表配置json文件，若干替換圖片瓣颅。
看代碼倦逐。大致實現(xiàn)是換膚庫提供了很多的UIKit組件的分類，提供了相關(guān)設(shè)置色值宫补，圖片的方法檬姥。并且會去注冊監(jiān)聽換膚通知。一般我們寫業(yè)務(wù)代碼的時候粉怕，都會使用那些分類所提供的支持換膚的方法健民。并且部分頁面需要主動監(jiān)聽換膚通知的從而實現(xiàn)主動渲染。當(dāng)觸發(fā)換膚的時候贫贝，頁面重新渲染荞雏，就會從對應(yīng)的皮膚包里獲取對應(yīng)的圖片，以及色值。從而實現(xiàn)的換膚凤优。
2.RN這邊既然要支持換膚悦陋，不就是JS中設(shè)置圖片，色值的地方改成通過橋接從原生那邊獲取對應(yīng)的色值和圖片嗎筑辨？
- 色值
首先原生寫好了一個橋接方法俺驶，傳入不同的key去色值表中查找對應(yīng)的16進制色值，返回給rn棍辕。rn頁面在render()函數(shù)之前暮现，調(diào)用該橋接獲取色值，并且通過state保存該色值楚昭。之后在render()函數(shù)渲染的時候設(shè)置到對應(yīng)的節(jié)點上就行了塘幅。好吧尿贫。是可以。后來又發(fā)現(xiàn)了個問題匾乓。RN中原生和JS橋接是異步執(zhí)行，那么就不能保證在render()函數(shù)執(zhí)行之前獲取到的是真正的色值咧七。很尷尬。這種方式好像行不通穴翩。換個思路。 - 圖片
其實RN加載圖片背蟆，是通過RCTImageLoader這個類志珍。通過斷點發(fā)現(xiàn)主要調(diào)用下面的那個方法。
-(RCTImageLoaderCancellationBlock)_loadImageOrDataWithURLRequest:(NSURLRequest *)request
size:(CGSize)size
scale:(CGFloat)scale
resizeMode:(RCTResizeMode)resizeMode
progressBlock:(RCTImageLoaderProgressBlock)progressHandler
partialLoadBlock:(RCTImageLoaderPartialLoadBlock)partialLoadHandler
completionBlock:(void (^)(NSError *error, id imageOrData, BOOL cacheResult, NSString *fetchDate))completionBlock {
}
主要的一個參數(shù)就是request。如果是網(wǎng)絡(luò)圖片就是正常的http:// 協(xié)議的鏈接淤翔。如果是本地圖片，不管是項目image.xcassets里的圖片還是mainBundle里的圖片寡具，又或者是沙盒里的圖片框喳，都會是一個file://協(xié)議的圖片本地地址乍惊。好吧。替換下圖片路徑試試莉撇？結(jié)果可行。那么RN圖片換膚就可以通過修改源碼來實現(xiàn)励翼。
3.圖片搞定了，還有色值呢殊橙？既然圖片可以通過修改源碼的形式搞定季研，那么色值能不能也通過修改源碼的方式去搞惹谐？找到原生這邊生成UIColor的方法？之前RN那部分不僅支持16進制的色值，而且還支持字符串類型的色值恳守，例如設(shè)置'red'，RN最終會設(shè)置成真正的色值缎罢。RN是不是通過這個字符串key伊群，去它自己的色值表去查找對應(yīng)色值的呢？那么就要找到將‘red’解析成真正色值的方法舰始。
- 原生部分
找了半天蛮寂，發(fā)現(xiàn)了RCTConvert中有個方法是用來轉(zhuǎn)換顏色的及老。斷點發(fā)現(xiàn)RN中的設(shè)置顏色最終都會來到該方法里轉(zhuǎn)換成UIColor的對象僧鲁。
+ (UIColor *)UIColor:(id)json
{
if (!json) {
return nil;
}
if ([json isKindOfClass:[NSString class]]) {
//去皮膚包查找色值
if([json isEqualToString:@"ck_black"]) {
return [UIColor whiteColor];
}
}
if ([json isKindOfClass:[NSArray class]]) {
NSArray *components = [self NSNumberArray:json];
CGFloat alpha = components.count > 3 ? [self CGFloat:components[3]] : 1.0;
return [UIColor colorWithRed:[self CGFloat:components[0]]
green:[self CGFloat:components[1]]
blue:[self CGFloat:components[2]]
alpha:alpha];
} else if ([json isKindOfClass:[NSNumber class]]) {
NSUInteger argb = [self NSUInteger:json];
CGFloat a = ((argb >> 24) & 0xFF) / 255.0;
CGFloat r = ((argb >> 16) & 0xFF) / 255.0;
CGFloat g = ((argb >> 8) & 0xFF) / 255.0;
CGFloat b = (argb & 0xFF) / 255.0;
return [UIColor colorWithRed:r green:g blue:b alpha:a];
} else {
RCTLogConvertError(json, @"a UIColor. Did you forget to call processColor() on the JS side?");
return nil;
}
}
好吧朗涩。看起來該方法里只支持從RN那邊傳遞過來的NSArray類型和NSNumber類型的绑改。也不支持NSString類型的啊识腿。所以RN中通過'red'這種字符串設(shè)置顏色的解析并不是在原生這部分。所以在原生部分支持字符串類型造壮。通過該字符串key去對應(yīng)皮膚包的色值表中去查找真正的色值渡讼。
- RN部分
發(fā)現(xiàn)node_modules/react-native/Libraries/StyleSheet/processColor.js該文件中processColor()函數(shù)是用來解析色值的。
var Platform = require('Platform');
var normalizeColor = require('normalizeColor');
/* eslint no-bitwise: 0 */
function processColor(color) {
if (color === undefined || color === null) {
return color;
}
var int32Color = normalizeColor(color);
if (int32Color === null) {
return undefined;
}
if(typeof int32Color === 'string') {
return int32Color;
}
// Converts 0xrrggbbaa into 0xaarrggbb
int32Color = (int32Color << 24 | int32Color >>> 8) >>> 0;
if (Platform.OS === 'android') {
// Android use 32 bit *signed* integer to represent the color
// We utilize the fact that bitwise operations in JS also operates on
// signed 32 bit integers, so that we can use those to convert from
// *unsigned* to *signed* 32bit int that way.
int32Color = int32Color | 0x0;
}
return int32Color;
}
在該方法中费薄，RN會去查找類似'red'這樣的色值硝全，并且返回為一個32位int類型栖雾。如果沒找到對應(yīng)色值楞抡，它會強轉(zhuǎn)為一個0x0的色值。所以我們在它查找完之后析藕，強轉(zhuǎn)之前召廷，如果沒找到，直接將字符串類型的變量返回出去账胧，這樣原生也就能接受到一個字符串類型的key了竞慢。
最后
最后RN換膚實踐成功實現(xiàn)了產(chǎn)品的需求。就是找代碼的過程很藍(lán)瘦治泥，尤其是JS的那部分筹煮。如果RN版本升級了，動過的源碼部分也要同步過去居夹。
