反应本机模式未关闭

Question

I'm overlaying the following Modal component in my iOS app while waiting for several async requests to come back.

<Modal transparent={true} visible={this.state.visible}>
    <View style={{flex: 1}}>
        <ActivityIndicator color="white" size="large"/>
    </View>
</Modal>

this.state.visible is set to false once all the requests have returned. However, about 50% of the time the modal remains on the screen indefinitely, even after the requests have come back. I've logged this.state.visible at the top of my render function and it is false as expected, yet the modal does not disappear. Any thoughts as to why this may be happening?

Answer 1

Perhaps it was the same problem I'm facing here.

I get this problem when closing one modal and opening another, some people are getting this with a modal and an alert...

https://github.com/facebook/react-native/issues/10471

For now, the solution is a timeout before the action (600ms should solve it).

Answer 2

A simple solution for now, before showing the dialog again, first, make it invisible with time delay, then show the dialog again

this.setState({
    showPopUp: false,
  }, () => {
    let timer = setTimeout(() => {
      this.setState({
        showPopUp: true,
      });
    }, 300);
  })

Answer 3

您可以使用 react-native-paper 模式。

import { Modal } from 'react-native-paper';