2017-12-18 64 views
0

我想在屏幕上按下按钮的同一页面中使用两种模式。他们应该依次显示和隐藏。首先,我需要显示isModalVisibleConnection模态,然后它应该被关闭,并且应该显示另一个模态(isModalVisible模态)。最后,isModalVisible模式也应该关闭,应用程序应该被重定向到另一个屏幕。我的代码下面的按钮:使用Modal时出现“警告:只能更新已安装或挂载的组件”

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),其他情态动词是在里面。第二种模式也是作为一个视图。我应该提到,当我以不同的方式使用模态(分别使用模态)时,第二模态不会在IOS中显示。这是该应用以合适的方式显示两种模式的唯一方式。 的问题是,当我重定向到下一个屏幕,它让我看到以下警告:

警告:只能更新安装或安装组件。这通常意味着 你叫设定状态,更换 卸载的组件状态或强制更新...

的它,因为锁定我的应用程序的一些倍。你有什么想法,我该如何处理这种战争? (如果您需要更多代码或信息,请在帖子后面提及)谢谢

回答

0

setState操作是异步的,并且为了提高性能而进行批处理。

setState()不会立即改变this.state,但会创建一个 挂起状态转换。调用 方法后访问this.state可能会返回现有值。没有 保证同步操作对setState的调用,并且调用可能为 进行批处理以提高性能。

在你的情况,你可能希望可以肯定,你的导航工作将在您的setState结束触发:

this.setState({isModalVisible:假},()=> this.props .navigation.navigate(...));

相关问题