imobile_for_reactnative/NativeModule/components/SMSceneViewUI.js

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

/**
 * Created by will on 2017/3/22.
 */
import PropTypes from 'prop-types'
import React, {Component} from 'react'
import {
  requireNativeComponent,
  View,
  StyleSheet,
  ViewPropTypes,
  Platform,
  AppState,
  NativeModules,
} from 'react-native'
// import SceneControl from './../SceneControl';

const SScene = NativeModules.SScene

class SMSceneView extends Component {

  componentDidMount() {
    this.stateChangeCount = 0
    AppState.addEventListener('change', this.handleStateChange)
  }

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

  //切换到后台时停止渲染
  handleStateChange = appState => {
    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') {
        SScene.setIsRender(true)
      } else if (appState === 'background') {
        SScene.setIsRender(false)
      }
    }
  }

  _onChange = (event) => {
    if (!this.props.onGetScene) {
      console.error("no onGetScene property!")
      return
    }
    console.log("has SceneControl id:" + event.nativeEvent.sceneControlId)
    this.props.onGetScene()
  }

  static propTypes = {
    onGetScene: PropTypes.func,
    ...ViewPropTypes,
  }

  render() {
    var props = {...this.props}
    props.returnId = true

    return (
      <View style={styles.views}>
        {Platform.OS === 'android' && <View style={styles.view} />}
        <RCTSceneView
          {...props}
          style={styles.map}
          onChange={this._onChange}
        />
        {Platform.OS === 'android' && <View style={styles.view} />}
      </View>
    )
  }
}

var RCTSceneView = requireNativeComponent('RCTSceneView', SMSceneView, {
  nativeOnly: {
    returnId: true,
    onChange: true,
  }
})

var styles = StyleSheet.create({
  views: {
    flex: 1,
    alignSelf: 'stretch',
    backgroundColor: '#ffbcbc',
    alignItems: 'center',
    justifyContent: 'center',
    overflow: 'hidden',
  },
  map: {
    flex: 1,
    alignSelf: 'stretch',
  },
  pic: {
    position: 'absolute',
    top: -100,
    left: -100,
  },
  view: {
    height: 1,
    width: '100%',
  },
})

export default SMSceneView