Call Native Components and Native Methods

Last Updated on : 2021-08-27 11:07:18download

Use Native encapsulation method API (take TYRCTCameraManager as an example)

Rn import Native package module (cameramanager.js)

import { NativeModules } from 'react-native';

export default NativeModules.TYRCTCameraManager;

How to use this package module

import CameraManager from './cameramanager.js';

// Call the connect method in the Native encapsulation method module TYRCTCameraManager
CameraManager.connect(
      res => {
       console.log(res, 'P2P connection succeeded');
      },
      err => {
       console.log(res, 'P2P establishment failed');
      }
    );

Use Native packaged components (take TYRCTCameraPlayer as an example)

RN introduces Native package component (cameraPlayer.js), player

import React from 'react';
import { requireNativeComponent, View } from 'react-native';
import PropTypes from 'prop-types';

// Import native components
const Player = requireNativeComponent('TYRCTCameraPlayer', CameraPlayer, {
  nativeOnly: { onChange: true }
});
// Native components import repackage
class CameraPlayer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }
  render() {
    return (
      <Player
        {...this.props}
        onChange={event => {
          this.props.onChangePreview(event);
        }}
      />
    );
  }
}

CameraPlayer.propTypes = {
  action: PropTypes.number.isRequired,
  onChangePreview: PropTypes.func.isRequired,
  ...View.propTypes,
};

module.exports = CameraPlayer;