React Native-Modal作为错误组件(打开多次)

Question

我创建了一个Error组件以显示在模态中。我还使用PubSub来获取错误通知，所以我会激活组件。

但是，我有多个屏幕，如登录，注册，任何形式，另一种形式。

因此，每次我有一个组件，它都会构建一个新的。。。因此，根据您所处的屏幕，您最多可以看到5个型号以相同的信息打开。

• 如果你在登录，那么你只有一个模态-It self
• 如果你在注册，你有两个-登录和它自己
• 如果你是以任何形式，你有三个：登录、注册(如果你进入了那个屏幕)和It Self

。。。。

它还在继续。

所以这门课很简单。

export default class Error extends Component {
constructor(){
super();
this.state = {
modalVisible: false,
errors: []
}
this.setModalVisible = this.setModalVisible.bind(this);
}
setModalVisible(visible) {
this.setState({modalVisible: visible});
}
// Using pubSub to get new error msgs...    
componentDidMount() {
PubSub.subscribe("error",function(topic,error){
// Did this to try to stop to show twice
if(this.state.modalVisible)
return;
//Irelevant code here    
this.setState({errors: errors});
this.setModalVisible(true);
}.bind(this));
}

render() {
return (    
<Modal
animationType={"slide"}
transparent={false}
visible={this.state.modalVisible}
onRequestClose={() => this._setModalVisible(false)}
>
<View style={styles.container}>
<View style={styles.header}>
<View/>
<Text style={styles.headerText}>
An error has occured
</Text>
<Icon
raised
name='close'
color='red'
onPress={() => {
this.setModalVisible(!this.state.modalVisible)
}} />
</View>
<View style={styles.errorContainer}>
{ this.state.errors.map((error, index) => <Text key={index} style={styles.error}>{error}</Text> ) }
</View>
</View>
</Modal>
);
}
}

我有一个"ViewContainer"，它为我的应用程序提供了通用外观(如标题和后退按钮)。我在那里渲染。但我渲染的每个屏幕都是这样的：

render(){
return (
<ViewContainer title={'Awesome Form Here'} onBackPress={ this.back }>
//Content goes here
</ViewContainer>
);
}

所以真正的问题是：如何确保react(或react native)不会创建一堆这样的组件。。。我怎么能在每个屏幕上加一个而不让所有屏幕都弹出呢？

PS：我想我可以给错误组件添加一个属性。。。类似：

{
screen: "Awesome Form",
error: "Errors here"
}

在我的Subscribe方法中，我检查是否应该根据屏幕名称使其可见。类似于：

if(!this.state.screenName == error.screen)
return;

无论如何，这看起来太初级了。也许还有更好的方法。

编辑使用组件：

<Error />

并使用PubSub提交错误：

PubSub.publish("error", json.errors || ['Something went wrong.']);

Answer 1

是的，就像我在问题上说的。。。我已经做了一个丑陋的解决方案：我仍在寻找更好的替代方案。

// Checking if the screen is the same
if(this.props.screen !== error.screen)
return;

构建错误对象：

var error = {
screen: 'SignIn',
errors: json.errors || ['Something went wrong.']
}
PubSub.publish("error", error);

使用错误组件：

<Error screen='SignUp'/>