2016-04-12 12 views
2

Reactネイティブコンポーネントを使用してUIImagePickerControllerオーバーレイビューを定義したいとします。私は素晴らしいオプションであるマークシリングに新しいオプションを追加しようとしていますreact-native-image-picker。私は、ImagePickerManager.launchCamera関数が<View>と子をそのパラメータの1つとし、レンダリングしてそれをUIImagePickerController.cameraOverlayViewに渡すようにします。 ImagePickerManager.mでReactネイティブコンポーネントを使用したUIImagePickerControllerオーバーレイビュー

:私はこれまでのところ得

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>)を言うしようとした場合、私はREDBOXを取得します。

新しい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]; 
} 

ここでは何が欠けていますか?

答えて

0

後者の解決策(別のものを宣言するRCTRootView)は、私のために働いたものになりました。私が抱えていた問題は、何かの理由で、私がImagePickerManagerに追加したブリッジが@synthesize bridge = _bridge;を追加したことが、initWithBridgeで使用されたときに何もレンダリングされていなかったことでした。

代わりに、AppDelegateに作成されたブリッジをapplication: didFinishLaunchingWithOptions:で作成されたものとよく似たフィールドをin this hybrid app exampleと追加しました。 initWithBridgeブリッジを使用すると、オーバーレイが画面に表示されます。また、明示的にrootView.framerootView.backgroundColorを透明に設定してください。

Screenshot of UIImagePicker with React Native Overlay

関連する問題