Question

我注意到一个奇怪的行为，如果Modal出现在其上，然后在它上面，如果出现警报，警报很快就消失，用户无需点击任何内容，即使以编程方式删除模态，也不会删除从屏幕上。我认为是一个错误。有解决方法吗？

Answer 1

这似乎是React Native的麻烦。我也遇到过这个问题。修复它的最简单方法是在隐藏模态后调用带超时的警报： ... setTimeout(() => Alert.alert(msg), 10); ...

Answer 2

是的，我确实认为它应该是一个反应原生的错误，我的代码通过react-native 0.33工作正常，升级到0.37后，然后遇到了同样的问题。

以下内容是我对react-native GitHub问题的评论：https://github.com/facebook/react-native/issues/10471#issuecomment-262450975，希望对您有所帮助：

我将react-native从0.33升级到0.37后遇到了类似的问题。我想在关闭Modal后显示一个Alert对话框，但是即使在我关闭Alert对话框并使用cmd + R重新加载应用程序之后，Modal也不会消失。仅在iOS中，它通过react-native 0.33正常工作。

代码如下：

renderModal() {
  return (
    <Modal
      animationType = 'fade'
      transparent={true}
      visible={this.state.isProcessing}
      onRequestClose={()=>{}}>
      <View style={styles.modalContainer}>
        <LoadingSpiner size='large' color='white' styleAttr='Normal'/>
      </View>
    </Modal>
  )
}

_pressNext() {
  // display a Modal with a spinner
  this.setState({isProcessing: true}}

  // network request
  // ...
}

componentWillReceiveProps(nextProps) {
    // ...

    // to hide the Modal with a spinner
    this.setState({isProcessing: false})
    Alert.alert('title', 'Something has done!', [
      { text: 'Got it', onPress: () => {} }
    ])
  }
}

然后我尝试使用setTimeout解决它，代码如下：

componentWillReceiveProps(nextProps) {
    // ...

    // to hide the Modal with a spinner
    this.setState({isProcessing: false})
    setTimeout( () => {
      // this log will output
      console.log("show alert")
      // but Alert doesn't display
      // sometimes it will display occasionally
      Alert.alert("title", "msg")   
    }, 200)
}

然后模态将消失，但是，警告对话框无法显示!!!

我还尝试在setTimeout回调中运行setState，如下所示：

this.setState({isProcessing: false}, () => {
  setTimeout( () => {
    Alert.alert("title", "msg")
  }, 200)
}

但结果相同，警报对话框尚未弹出。

最后，我决定在关闭“警报”对话框后隐藏Modal，这样可行！代码如下：

Alert.alert("title", "msg", [
  { text: "OK", onPress: () => { this.setState({ isProcessing: false } }    
])

Answer 3

对我有用的是在setState中应用回调：

this.setState({
  modalShouldBeOpen: false,
},
() => {
  this.props.navigation.replace('NextPageToNavigateTo');
},
);

我认为问题在于没有回调，导航发生得太早了，并且模式陷入了奇怪的状态。

React Native：当警报出现在其上时，模态不会隐藏

3 个答案: