使用React Native组件

Question

我想使用React Native组件定义UIImagePickerController重叠视图。我正在设置为Marc Shilling添加一个新选项！react-native-image-picker。我希望ImagePickerManager.launchCamera函数将<View>和子项作为其参数之一，进行渲染，然后将其传递给UIImagePickerController.cameraOverlayView。我到目前为止：

在ImagePickerManager.m中：

NSNumber *viewTag = [self.options valueForKey:@"overlayNode"];
if (![viewTag isEqual:[NSNull null]] && viewTag != 0) {
    UIView *view = [_bridge.uiManager viewForReactTag:viewTag];
    [self.picker setCameraOverlayView:view];
}

但这需要我在JS方面做一些扭曲以获得组件实例。

React.createClass({
    render: function() { 
        return (
            <View>
                <TouchableHighlight onPress={this._showCamera}><Text>Camera</Text></TouchableHighlight>
                <View ref="foo"><Text>On top of the camera!</Text></View>
            </View>
        );
    },
    _showCamera: function() {
        var options = {
            overlayNode: React.findNodeHandle(this.refs.foo),
        };
        ImagePickerManager.launchCamera(options, (response)  => {

        });
    }
});

如果我试着说overlayNode: React.findNodeHandle(<View ref="foo"><Text>On top of the camera!</Text></View>)，我会收到一个红盒子。

我尝试了一下创建一个新的RCTRootView并通过AppRegistry.registerComponent注册了叠加层，但我没有在屏幕上看到任何实际渲染内容。

NSString *overlayRootName = [self.options valueForKey:@"overlayComponentName"];
if (![overlayRootName isEqual:[NSNull null]] && overlayRootName.length != 0) {
    RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:self.bridge moduleName:overlayRootName initialProperties:nil];
    [self.picker setCameraOverlayView:rootView];
}

我在这里缺少什么？

Answer 1

后一种解决方案（声明替代RCTRootView）最终成为对我有用的解决方案。我遇到的问题是，由于某种原因，我在ImagePickerManager中添加@synthesize bridge = _bridge;时遇到的桥梁在initWithBridge中使用时未呈现任何内容。

相反，我向AppDelegate添加了一个字段，露出了application: didFinishLaunchingWithOptions:中创建的桥，就像所做的那样in this hybrid app example。当我在initWithBridge中使用那个桥接时，叠加层会在屏幕上呈现。同时确保明确将rootView.frame和rootView.backgroundColor设置为透明。