React Native 03：换肤支持

因为原生这边有个换肤功能，用户下载对应的皮肤包，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版本升级了，动过的源码部分也要同步过去。