页面更改后 React-native-popup-dialog 未关闭

Question

我将这个包用于对话框。当用户进入时，我得到的一些页面会自动打开这个对话框。问题是当用户点击另一个屏幕按钮时（对话框正在打开）。应用导航到另一个屏幕，对话框仍然打开。

import Dialog, {
  DialogFooter,
  DialogButton,
  DialogContent,
  DialogTitle,
} from 'react-native-popup-dialog';

constructor(props) {
    super(props);
    this.state = {
    
      controlDialog: false, 
    };
  }

在模糊中我关闭它但没有任何反应

  componentDidMount() {
    const t = this;
    this._unsubscribe = this.props.navigation.addListener('blur', () => {
      this.setState({controlDialog:false})

    });

在渲染对话框中

<Dialog
  visible={this.state.controlDialog}
  width={0.8}
  footer={
    <DialogFooter style={{ paddingVertical: 10 }}>
      <DialogButton
        textStyle={{
          fontSize: 16,
          fontWeight: "normal",
          color: "white",
        }}  
        text="Later"
        onPress={() => {
          this.setState({ controlDialog: false }, () => {});
        }}
      />
      <DialogButton
        textStyle={{
          fontSize: 16,
          fontWeight: "normal",
          color: "white",
        }}  
        text="OK"
        onPress={() => {}}
      />
    </DialogFooter>
  }
>
  <DialogContent></DialogContent>
</Dialog>;

什么尝试

componentDidUnmount() {
    this.setState({controlDialog: false});
    alert('1');
  }
  componentWillUnmount() {
    this.setState({controlDialog: false});

    alert('2');
  }

标签栏

function TabBar({state, descriptors, navigation}) {
  return (
    <Box
      pb={Platform.OS=='android'?10:25}
      bg="white"
      flexDirection="row"
      style={{
        shadowColor: '#000',
        shadowOpacity: 0.1,
        shadowRadius: 20,
      }}>
      {state.routes.map((route, index) => {
        const {options} = descriptors[route.key];

        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
          });

          if (!isFocused && !event.defaultPrevented) {
            NavigationService.reset(route.name);
          }
        };

....

Answer 1

更改类生命周期的 Dialog componentDidUnmount() 方法。当您离开屏幕时会调用此方法。

  componentDidUnmount() {
  
     this.setState({controlDialog:false})    

   }