2017-12-18 10 views
0

画面上のボタンを押すと同じページで2つのモーダルを使用します。それらは順番に表示および非表示にする必要があります。まず、isModalVisibleConnectionモーダルを表示し、次にそれを閉じて別のモーダル(isModalVisibleモーダル)を表示する必要があります。最後に、isModalVisibleモーダルも閉じて、アプリケーションを別の画面にリダイレクトする必要があります。私のコードは、ボタンのために以下の通りです:モーダルを使用中に「警告:マウントされたコンポーネントまたはマウントされているコンポーネントのみを更新できます」

私はモーダルを置くために、次のパターンを使用してレンダリングモードで
onPress() { 
     this.setState({ isModalVisibleConnection: true ,isModalVisibleMain: true}); 

     LIB.requestAccess().then((response) => { 
     console.log("responsexxxx exit part",response); 
     if(response.requestCode==1) 
      { 
      this.setState({ isModalVisibleConnection: false , isModalVisible: true}); 

       //////Wait for 10 seconds and Redirecting 
       if(this.timer > 0) return; 
       this.timer = setTimeout(() => { 
       //turn off the pop up 

       this.props.navigation.navigate('ParkInBuilding', {user: this.state.passedProps.user, positionState:this.state.passedProps.positionState, parkingState: this.state.passedProps.parkingState, activeSection: 'ParkNewError_0'}); 
       this.timer = null; //not necessary if you are unmounting the component 
       }, 10000); 
      } 
      else { 

       console.log("something wrong!!",response.requestMessage); 

       Alert.alert(
        'Error', 
        response.requestMessage , 

        [ 
        //{text: 'Ask me later', onPress:() => console.log('Ask me later pressed')}, 
        {text: 'OK', onPress:() => this.setState({ isModalVisibleMain: false, isModalVisible: false, isModalVisibleConnection: false })}, 
        //{text: 'OK', onPress:() => console.log('OK Pressed')}, 
        ], 
        { cancelable: false } 
       ) 
      } 
      console.log("responesssssssssss Exit",response); 
      }); 

     } 

<Modal isVisible={this.state.isModalVisibleMain}> 
       <Modal isVisible={this.state.isModalVisible}> 
        <View style={styles.timerContainer}> 
        <Text style={styles.orangeTextBold}>Si prega di passare il{"\n"} cancello di uscita.{"\n"} 
        <Text style={styles.itemBold}>{"\n"} </Text> 
        <Text style={styles.itemBold}>Arrivederci e grazie per aver utilizzato il nostro servizio.{"\n"} 
        </Text> </Text> 
        <Text style={styles.itemBold}> </Text> 
        <CountdownCircle 
        seconds={10} 
        radius={40} 
        borderWidth={8} 
        color="#FABB00" 
        bgColor="#fff" 
        textStyle={{ fontSize: 30 }} 
        onTimeElapsed={() => console.log('Elapsed!')} 
        /> 
        </View> 
        </Modal> 

        <View isVisible={this.state.isModalVisibleConnection}> 
        <View style={styles.loader}> 
        <Text style={styles.ComOrangeTextBold}>{I18n.t('Comunicazione')}</Text> 
        <Text style={styles.ComOrangeTextBold}></Text> 
        <View> 
         <Bars size={30} color="#FABB00" /> 
        </View> 
        </View> 
        </View> 
       </Modal> 

私はメインモーダル(isModalVisibleMain)を持つ他のモーダルであることその中。また、第2のモーダルは、ビューの内部にあります。モダールを別の方法で使用すると(別にモーダルを入れる)、2番目のモーダルはIOSでは表示されません。これは、アプリケーションが適切な方法で両方のモーダルを表示する唯一の方法でした。

警告:のみ搭載または取り付けコンポーネントを更新することができ 問題は、私は次の画面にリダイレクトするように、それは私に次の警告を示す、ということです。これは通常 それの原因をあなたが設定された状態と呼ばれる意味、 アンマウントコンポーネントの状態や力のアップデートを交換...

私のアプリいくつかの回をロックします。あなたはこの儀式をどうやって扱うことができると思いますか? (コードまたは情報が必要な場合は、ポストの下に記載してください)

答えて

0

setStateアクションはパフォーマンス向上のためにバッチ処理されています。

setState()はthis.stateをただちに変更するのではなく、 ペンディング状態の遷移を作成します。この メソッドを呼び出した後this.stateにアクセスすると、潜在的に既存の値が返される可能性があります。 setStateへの呼び出しの同期操作を保証する はなく、パフォーマンス向上のために を呼び出してもよいでしょう。

this.setState({isModalVisible:偽}、()=> this.propsあなたはナビゲーションの仕事は、あなたのSETSTATEの終わり引き金となることを確信することにしたいことがあります場合は

.navigation.navigate(...));

関連する問題

 関連する問題