imobile_for_reactnative/NativeModule/components/SMAIGestureBoneView.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 {
  SGestureBoneView,
} from 'imobile_for_reactnative'

class SMAIGestureBoneView 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() {
    // GLOBAL.Type === constants.MAP_AR &&
    this.setState({
      visible: true,
    })
  }

  componentDidUpdate(prevProps) {
  }

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

  _onDestroy = async ()=>{
    // await SGestureBoneView.onPause()
    // await SGestureBoneView.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') {
      //   SGestureBoneView.onResume()
      // } else if (appState === 'background') {
      //   SGestureBoneView.onPause()
      // }
    }
  }


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

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

    return (
      <View
        style={styles.container}
      >
        <RCTAIGestureBoneViewManager
          ref={ref => this.RCTAIGestureBoneViewManager = 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 RCTAIGestureBoneViewManager = requireNativeComponent('RCTAIGestureBoneViewManager', SMAIGestureBoneView)

export default SMAIGestureBoneView