react-native - 如何在 React Native 中将 View 导出为图像数据

Question

我正在尝试导出 View 的渲染图形在 React Native 中。例如，我的观点是这样的:
<View>
<Image/> // Some image
<Rectangle /> // Some little
<Circle /> // Some circle
</View>

如何从容器中提取渲染的图形 View转换成任何图像数据格式？

Answer 1

见 https://stackoverflow.com/a/31936516/528842

子类 RCTView并添加 export方法:

MyCoolView.m :

- (NSData *)export
{
  UIGraphicsBeginImageContext(self.bounds.size);
  [self.layer renderInContext:UIGraphicsGetCurrentContext()];
  UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
  UIGraphicsEndImageContext();
  return UIImagePNGRepresentation(image);
}

揭秘export native View 管理器中的方法:

关键是传入 reactTag这是对 native 组件的引用。
MyCoolViewManager.m :

RCT_EXPORT_METHOD(export:(NSNumber *)reactTag callback:(RCTResponseSenderBlock)callback) {
  [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, RCTSparseArray *viewRegistry) {
    MyCoolView *view = viewRegistry[reactTag];
    if (![view isKindOfClass:[MyCoolView class]]) {
      RCTLogMustFix(@"Invalid view returned from registry, expecting MyCoolView, got: %@", view);
    }
    NSData * imageData = [view export];
    callback(@[[NSNull null], [imageData base64EncodedStringWithOptions:0]]);
  }];
}

曝光 export来自 React 组件的方法:

MyCoolView.js :

var React = require('react-native');
var NativeModules = require('NativeModules');
var MyCoolViewManager = NativeModules.MyCoolViewManager;
var findNodeHandle = require('findNodeHandle');

class MyCoolView extends React.Component{
    // ...
    export() {
        return new Promise((resolve, reject) => {
            MyCoolViewManager.export(
                findNodeHandle(this),
                (error, result) => {
                    if (error) {
                        reject(error);
                    } else {
                        resolve(result);
                        // now we've got the base64 encoded data of the exported image
                    }
                }
            );
        });
    }
}

调用 export方法:

该组件如下所示:

<MyCoolView ref='myCoolView'>
    <Image />
        <Rectangle />
        <Circle />
    </View>
</MyCoolView>

在某些功能中:

this.refs.myCoolView.export()
    .then(base64data => {
        console.log(base64data);
    }, error => {
        console.error(error);
    });