Блог

Я пытаюсь создать собственный модуль для React Native, используя собственный API камеры из objective C, но я не могу отобразить камеру, я могу отображать только фон, установленный в методе layoutSubviews.

Мой файл RNCameraManager.m:

 #import "RNCameraManager.h"
#import <React/RCTViewManager.h>
#import "RNCamera.h"

@interface RNCameraManager : RCTViewManager
@end

@implementation RNCameraManager

RCT_EXPORT_MODULE(RNCameraManager)

- (UIView *)view
{
  return [[RNCamera alloc] initWithBridge:self.bridge];
}

@end

  

Мой файл RNCamera.m:

 #import "RNCamera.h"
#import <React/RCTUtils.h>
#import <React/UIView React.h>

@interface RNCamera ()

@property (nonatomic, weak) RCTBridge *bridge;
@property (nonatomic, strong) AVCaptureSession *session;
@property (nonatomic, strong) AVCaptureVideoPreviewLayer *previewLayer;

@end

@implementation RNCamera

- (id)initWithBridge:(RCTBridge *)bridge
{
  if((self = [super init])) {
    self.bridge = bridge;
    self.session = [AVCaptureSession new];
    self.sessionQueue = dispatch_queue_create("cameraQueue", DISPATCH_QUEUE_SERIAL);
  }
  
  return self;
}

- (void)layoutSubviews
{
  [super layoutSubviews];
  self.previewLayer.frame = self.bounds;
  [self setBackgroundColor:[UIColor redColor]];
  [self.layer insertSublayer:self.previewLayer atIndex:0];
}

@end
  

Когда я вызываю этот метод в React Native, я получаю только красный экран (потому что я установил красный цвет в качестве цвета фона).

Я устанавливаю размер представления при рендеринге react native (когда я пытаюсь переключить камеру RN на Карты, работает отлично, поэтому проблема заключается в том, что пришло время фактически отобразить камеру, а не вид)

Мой результат рендеринга

редактировать 1 (реагировать на собственный код):

RNCamera.js

 import React from 'react';
import {
  requireNativeComponent,
  Platform,
  PermissionsAndroid,
} from 'react-native';

const RNCamera = requireNativeComponent('RNCamera');

export default RNCamera;
  

App.js:

 import React from 'react';
import {StyleSheet, View, Text, StatusBar} from 'react-native';

import RNCamera from './RNCamera';

const App: () => React$Node = () => {
  return (
    <>
      <StatusBar barStyle="dark-content" />
      <View style={styles.container}>
        <RNCamera style={styles.camera} />
        <Text>Hello RN</Text>
      </View>
    </>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },

  camera: {
    width: 220,
    height: 220,
  },
});

export default App;