Skip to content

Instantly share code, notes, and snippets.

@mactive
Last active July 11, 2019 02:21
Show Gist options
  • Save mactive/7d18b68cf814eab670915a83e4c8492a to your computer and use it in GitHub Desktop.
Save mactive/7d18b68cf814eab670915a83e4c8492a to your computer and use it in GitHub Desktop.
rn-topview
/**
* mactive@gmail.com
* 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;
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;
@mrxuyong
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment