imobile_for_reactnative/NativeModule/components/SMAIPoseEstimationView.js

iMobile for ReactNative，是SuperMap iMobile推出的一款基于React-Native框架的移动应用开发工具。基于该开发工具，用户可以使用JavaScript开发语言，开发出在Android和IOS操作系统下运行的原生移动GIS应用，入门门槛低，一次开发，处处运行。

import * as React from 'react'
import {
  requireNativeComponent,
  ViewPropTypes,
  StyleSheet,
  View, Platform,
  AppState,
} from "react-native";
import PropTypes from 'prop-types'
import {
  SPoseEstimationView,
} from 'imobile_for_reactnative'

class SMAIPoseEstimationView extends React.Component {

  constructor() {
    super()

    this.state = {
      viewId: 0,
      visible: false,
    }
    AppState.addEventListener('change', this.handleStateChange)
    this.stateChangeCount = 0
  }

  static propTypes = {
    visible: PropTypes.bool,
    ...ViewPropTypes,
  };

  static defaultProps = {
    visible: false,
  }

  componentDidMount() {
    this.setState({
      visible: true,
    })
  }

  componentDidUpdate(prevProps) {
  }

  componentWillUnmount() {
    this._onDestroy()
    AppState.removeEventListener('change', this.handleStateChange)
  }

  _onDestroy = async ()=>{
    await SPoseEstimationView.onPause()
    await SPoseEstimationView.onDestroy()
  }

  /************************** 处理状态变更 ***********************************/

  handleStateChange = async appState => {
    if (Platform.OS === 'android') {
      return
    }
    if (appState === 'inactive') {
      return
    }
    let count = this.stateChangeCount + 1
    this.stateChangeCount = count
    if (this.stateChangeCount !== count) {
      return
    } else if (this.prevAppstate === appState) {
      return
    } else {
      this.prevAppstate = appState
      this.stateChangeCount = 0
      if (appState === 'active') {
        SPoseEstimationView.onResume()
      } else if (appState === 'background') {
        SPoseEstimationView.onPause()
      }
    }
  }


  render() {
    var props = { ...this.props };

    if (!this.state.visible) {
      return null
    }

    return (
      <View
        style={styles.container}
      >
        <RCTAIPoseEstimationView
          ref={ref => this.RCTAIPoseEstimationView = ref}
          {...props}
          style={styles.view}
        />
      </View>
    );
  }
}

var styles = StyleSheet.create({
  view: {
    flex: 1,
    alignSelf: 'stretch',
  },
  container: {
    position: 'absolute',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: 'transparent',
  },
});

var RCTAIPoseEstimationView = requireNativeComponent('RCTAIPoseEstimationView', SMAIPoseEstimationView)

export default SMAIPoseEstimationView