因为原生这边有个换肤功能，用户下载对应的皮肤包，app会重新渲染一些页面元素色值，以及替换相关图片。某一天产品跑来说，RN的页面也要支持换肤哦。虽然我默默的从抽屉里拿出来一把caidao。但还是要去想办法把它搞掉。
思路如下：
1.先去看看原生那边换肤是怎么玩的。
- 点开app下载一个皮肤包。会从服务器请求一个zip压缩包。
- 解压缩打开，一份色值表配置json文件，若干替换图片。
看代码。大致实现是换肤库提供了很多的UIKit组件的分类，提供了相关设置色值，图片的方法。并且会去注册监听换肤通知。一般我们写业务代码的时候，都会使用那些分类所提供的支持换肤的方法。并且部分页面需要主动监听换肤通知的从而实现主动渲染。当触发换肤的时候，页面重新渲染，就会从对应的皮肤包里获取对应的图片，以及色值。从而实现的换肤。
2.RN这边既然要支持换肤，不就是JS中设置图片，色值的地方改成通过桥接从原生那边获取对应的色值和图片吗？
- 色值
首先原生写好了一个桥接方法，传入不同的key去色值表中查找对应的16进制色值，返回给rn。rn页面在render()函数之前，调用该桥接获取色值，并且通过state保存该色值。之后在render()函数渲染的时候设置到对应的节点上就行了。好吧。是可以。后来又发现了个问题。RN中原生和JS桥接是异步执行，那么就不能保证在render()函数执行之前获取到的是真正的色值。很尴尬。这种方式好像行不通。换个思路。 - 图片
其实RN加载图片，是通过RCTImageLoader这个类。通过断点发现主要调用下面的那个方法。
-(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 {
}
主要的一个参数就是request。如果是网络图片就是正常的http:// 协议的链接。如果是本地图片，不管是项目image.xcassets里的图片还是mainBundle里的图片，又或者是沙盒里的图片，都会是一个file://协议的图片本地地址。好吧。替换下图片路径试试？结果可行。那么RN图片换肤就可以通过修改源码来实现。
3.图片搞定了，还有色值呢？既然图片可以通过修改源码的形式搞定，那么色值能不能也通过修改源码的方式去搞？找到原生这边生成UIColor的方法？之前RN那部分不仅支持16进制的色值，而且还支持字符串类型的色值，例如设置'red'，RN最终会设置成真正的色值。RN是不是通过这个字符串key，去它自己的色值表去查找对应色值的呢？那么就要找到将‘red’解析成真正色值的方法。
- 原生部分
找了半天，发现了RCTConvert中有个方法是用来转换颜色的。断点发现RN中的设置颜色最终都会来到该方法里转换成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'这种字符串设置颜色的解析并不是在原生这部分。所以在原生部分支持字符串类型。通过该字符串key去对应皮肤包的色值表中去查找真正的色值。
- RN部分
发现node_modules/react-native/Libraries/StyleSheet/processColor.js该文件中processColor()函数是用来解析色值的。
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类型。如果没找到对应色值，它会强转为一个0x0的色值。所以我们在它查找完之后，强转之前，如果没找到，直接将字符串类型的变量返回出去，这样原生也就能接受到一个字符串类型的key了。
最后
最后RN换肤实践成功实现了产品的需求。就是找代码的过程很蓝瘦，尤其是JS的那部分。如果RN版本升级了，动过的源码部分也要同步过去。
网友评论