React Native 03:换肤支持

因为原生这边有个换肤功能,用户下载对应的皮肤包,用户切换皮肤之后,会触发一个全局的通知,需要支持换肤的UI视图对象会注册通知这个通知监听,然后重新渲染。某一天产品跑过来说,RN的页面也要支持换肤哦。呵呵。。。

思路

1.先看看原生那边换肤是怎么玩的。

  • 点开app下载一个皮肤包。会从服务器请求一个zip压缩包。

  • 解压缩打开,一份色值表配置json文件,若干替换图片。
    看代码。大致实现是换肤库提供了很多的UIKit组件的分类,提供了相关设置色值,图片的方法。并且会去注册监听换

    肤通知。一般我们写业务代码的时候,都会使用那些分类所提供的支持换肤的方法。并且部分页面需要主动监听换肤通知的从而实现主动渲染。当触发换肤的时候,页面重新渲染,就会从对应的皮肤包里获取对应的图片,以及色值。从而实现的换肤。

2.RN这边既然要支持换肤,不就是JS中设置图片,色值的地方改成通过桥接从原生那边获取对应的色值和图片吗?

  • 色值
    首先原生写好了一个桥接方法,传入不同的key去色值表中查找对应的16进制色值,返回给rn。rn页面在render()函数之前,调用该桥接获取色值,并且通过state保存该色值。之后在render()函数渲染的时候设置到对应的节点上就行了。好吧。是可以。后来又发现了个问题。RN中原生和JS桥接是异步执行,那么就不能保证在render()函数执行之前获取到的是真正的色值。很尴尬。这种方式好像行不通。换个思路。

  • 图片
    其实RN加载图片,是通过RCTImageLoader这个类。通过断点发现主要调用下面的那个方法。

    1
    2
    3
    4
    5
    6
    7
    8
    -(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的对象。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
      + (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()函数是用来解析色值的。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
      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了。

Rui,<br>.....。