rn-topview

topview.js

/**
 * [email protected]
 * 2017-05-08
 */

'use strict';
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  DeviceEventEmitter
} from 'react-native';

class TopView extends Component {
  // 构造
  constructor(props) {
    super(props);
    // 初始状态
    this.state = {
      element: null
    };
  }
  componentWillMount() {
    DeviceEventEmitter.addListener("topViewAdd", this.setTopView.bind(this))
    DeviceEventEmitter.addListener("topViewRemove", this.removeTopView.bind(this))
  }

  componmentDidMount() {
    DeviceEventEmitter.removeAllListeners("topViewAdd")
    DeviceEventEmitter.removeAllListeners("topViewRemove")
  }
  setTopView(e) {
    let valid = React.isValidElement(e)
    return valid ? this.setState({ element: e }) : console.error("element must be valid react element?");
  }
  removeTopView() {
    this.setState({ element: null })
  }
  render() {
    return this.state.element
  }
}

const maskStyle = {
  style: {
    flex: 1,
    // position: 'absolute',
    // left: 0,
    // top: 0,
    // alignItems: 'center',
    // justifyContent: 'center',
    // backgroundColor: '#009900',
  }
}

let originRegisterComponent = AppRegistry.registerComponent
AppRegistry.registerComponent = function (element, func) {
  var reg = func();
  return originRegisterComponent(element, function(){
    console.log('--originRegisterComponent--');
    return React.createClass({
      render: function(){
        console.log('originRegisterComponent-render');
        return React.createElement(
          View,
          maskStyle,
          React.createElement(reg, this.props),
          React.createElement(TopView, null)
        )
      }
    })
  })
}


exports.default = {
  set: (e) => DeviceEventEmitter.emit("topViewAdd", e),
  remove: () => DeviceEventEmitter.emit("topViewRemove")
} 

module.exports = exports.default;

tt.js

function _interopRequireDefault(e) { 
  return e && e.__esModule ? e : { default: e } 
} 
  Object.defineProperty(exports, "__esModule", { value: !0 }); 
  var _react = require("react"), 
  _react2 = _interopRequireDefault(_react), 
  _reactNative = require("react-native"), 
  TopView = _react2.default.createClass({
    displayName: "TopView", 
    getInitialState: function () { return { element: null } }, 
    componentWillMount: function () { 
      _reactNative.DeviceEventEmitter.addListener("topViewAdd", this.setTopView), 
      _reactNative.DeviceEventEmitter.addListener("topViewRemove", this.removeTopView) 
    }, 
    componentWillUnmount: function () { 
      _reactNative.DeviceEventEmitter.removeAllListeners("topViewAdd"), 
      _reactNative.DeviceEventEmitter.removeAllListeners("topViewRemove") 
    }, 
    setTopView: function (e) { 
      return _react2.default.isValidElement(e) ?
       void this.setState({ element: e }) : 
       void console.error("element must be valid react elment!") 
    }, 
    removeTopView: function () { 
      this.setState({ element: null }) 
    }, 
    render: function () { 
      return this.state.element } 
  }), 
  originRegisterComponent = _reactNative.AppRegistry.registerComponent; 
  _reactNative.AppRegistry.registerComponent = function (e, t) { 
    var r = t(); 
    return originRegisterComponent(e, function () { 
      return _react2.default.createClass({ 
        render: function () { 
          return _react2.default.createElement(
            _reactNative.View, 
            { style: { flex: 1 } }, 
            _react2.default.createElement(r, this.props), 
            _react2.default.createElement(TopView, null)) 
        } 
      }) 
    }) 
  }, 
  exports.default = { 
    set: function (e) { _reactNative.DeviceEventEmitter.emit("topViewAdd", e) }, 
    remove: function () { _reactNative.DeviceEventEmitter.emit("topViewRemove") } 
  }, 
  module.exports = exports.default;

你好，topview中的 set(< AComponent / >) 方法，每次都会加载两次 组件 AComponent，这个问题解决了吗？