143 lines
4.5 KiB
JavaScript
143 lines
4.5 KiB
JavaScript
import React, { Component } from 'react';
|
|
import createReactClass from 'create-react-class';
|
|
import { AppRegistry, View } from 'react-native';
|
|
import variables from '../../common/styles/variables';
|
|
const topviewList = []; // 使用数组，解决因 jsbundle 切换导致的元素丢失的问题
|
|
class Topview extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
count: 0,
|
|
modelList: []
|
|
};
|
|
}
|
|
componentDidMount() {
|
|
topviewList.push(this);
|
|
}
|
|
componentWillUnmount() {
|
|
const index = topviewList.indexOf(this);
|
|
topviewList.splice(index, 1);
|
|
}
|
|
add(c, args) {
|
|
return new Promise(resolve => {
|
|
setTimeout(() => {
|
|
let { modelList, count } = this.state;
|
|
++count;
|
|
const tmp = modelList.concat();
|
|
tmp.push({
|
|
id: count,
|
|
component: c,
|
|
args
|
|
});
|
|
this.setState({
|
|
count,
|
|
modelList: tmp
|
|
});
|
|
return resolve(count);
|
|
});
|
|
}).catch(e => {
|
|
console.error(e);
|
|
});
|
|
}
|
|
remove(id) {
|
|
return new Promise(resolve => {
|
|
setTimeout(() => {
|
|
let { modelList, count } = this.state;
|
|
let index = null;
|
|
const matched = modelList.some((item, i) => {
|
|
/* tslint:disable:triple-equals */
|
|
if (item.id == id) {
|
|
index = i;
|
|
return true;
|
|
}
|
|
else {
|
|
return false;
|
|
}
|
|
});
|
|
if (!matched) {
|
|
return resolve();
|
|
}
|
|
const tmp = modelList.concat();
|
|
tmp.splice(index, 1);
|
|
if (!tmp.length) {
|
|
count = 0;
|
|
}
|
|
this.setState({
|
|
modelList: tmp,
|
|
count
|
|
});
|
|
return resolve();
|
|
});
|
|
}).catch(e => {
|
|
console.error(e);
|
|
});
|
|
}
|
|
replace(c, id) {
|
|
return new Promise(resolve => {
|
|
let { modelList } = this.state;
|
|
const tmpList = modelList.concat();
|
|
let tmpIndex;
|
|
let tmpItem = tmpList.filter((item, index) => {
|
|
if (item.id === id) {
|
|
tmpIndex = index;
|
|
return true;
|
|
}
|
|
})[0];
|
|
tmpItem = {
|
|
...tmpItem,
|
|
component: c
|
|
};
|
|
console.log(c);
|
|
tmpList.splice(tmpIndex, 1, tmpItem);
|
|
this.setState({
|
|
modelList: tmpList
|
|
});
|
|
return resolve();
|
|
}).catch(e => {
|
|
console.error(e);
|
|
});
|
|
}
|
|
render() {
|
|
const { modelList } = this.state;
|
|
if (!modelList.length) {
|
|
return null;
|
|
}
|
|
else {
|
|
return (React.createElement(View, { style: {
|
|
position: 'absolute',
|
|
zIndex: variables.topviewZIndex == null ? 1 : variables.topviewZIndex,
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
}, pointerEvents: 'box-none', collapsable: false }, modelList.map((item) => {
|
|
const args = item.args || {};
|
|
args.fullScreenPatch = args.fullScreenPatch || [];
|
|
return item.component ? React.cloneElement(item.component, {
|
|
key: item.id
|
|
}) : null;
|
|
})));
|
|
}
|
|
}
|
|
}
|
|
// 制作registerComponent 的替身
|
|
const originRegisterComponent = AppRegistry.registerComponent;
|
|
// 改写 registerComponent 方法的实现
|
|
AppRegistry.registerComponent = function (element, func) {
|
|
const reg = func();
|
|
return originRegisterComponent(element, function () {
|
|
return createReactClass({
|
|
render: function () {
|
|
// 创建 root_element
|
|
return React.createElement(View, {
|
|
style: { flex: 1 }
|
|
}, React.createElement(reg, this.props), React.createElement(Topview, null));
|
|
}
|
|
});
|
|
});
|
|
};
|
|
function getInstance() {
|
|
return topviewList[topviewList.length - 1];
|
|
}
|
|
export { getInstance as TopviewGetInstance, Topview };
|
|
//# sourceMappingURL=index.js.map
|