React Native - Modal как компонент ошибки (открытие несколько раз)

Question

Я создаю компонент Error для отображения в модальном формате. Я также использую PubSub для получения уведомлений об ошибках, поэтому я активирую компонент.

Но у меня есть несколько экранов, таких как вход, регистрация, любая форма, другая форма.

Таким образом, каждый раз, когда у меня есть компонент, он создает новый ... Так что в зависимости от того, на каком экране вы находитесь, вы можете получить до 5 моделей, открывающихся с тем же сообщением.

• Если вы находитесь в Вход, то у вас есть только один модальный - это сам
• Если вы Вход Регистрация у вас есть два - Войти и это сам
• Если вы в какой бы форме Вы есть три: Вход, Регистрация (если вы ввели этот экран) и это сам

....

и это продолжается.

Таким образом, класс довольно прост.

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" с общим apperence для моего приложения (например, заголовок, и BackButton). И я делаю там. Но каждый экран я сделать это следующим образом:

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

Таким образом, реальный вопрос: Как убедиться в том, что реагирует (или реагирует родной) обыкновения создавать кучу этого компонента ... Как один перли гарантирую экран и не все они всплывают?

PS: Я думаю, я могу добавить атрибут к компоненту ошибки ... с подобным:

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

И на мой Subscribe метод я проверяю, если я должен сделать его видимым на основе имени экрана. Что-то вроде:

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

В любом случае, это выглядит слишком примитивно. Может быть, есть лучший способ.

EDIT Чтобы использовать компонент:

<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:

<Error screen='SignUp'/>