ios - react native /博览会 : Modal not showing when 'visible' prop is true on iOS

Question

我有一个在 React Native 中构建的应用程序，其中我有一个模式，当按下按钮时会出现并提示用户输入。我已经使用我现在使用的相同方法在应用程序中制作了其他可以正常工作的模态。但是当我改变这个决定模态是否可见的模态的状态时，它似乎完全忽略它并且不显示。该模式适用于我的 android 和我的许多 android 模拟器，但由于某种原因它不适用于我的 iphone 10。

我有一个文件 GameScreen.js，它是屏幕组件并在其中保存模式。它还保存了模态可见性的相关方法和状态:

import { 
    Body, 
    Button, 
    Container, 
    Content, 
    Header, 
    Icon, 
    Left,  
    Right,  
    View } from 'native-base';
import { BackHandler, StyleSheet, Text, TextInput, TouchableOpacity, Platform } from 'react-native';
import React, { Component, createRef } from 'react';

import myModal from '../components/myModal';

export default class GameScreen extends Component {
  constructor(props) {
    super(props)

    this.state = { 
      // other state
      isVisible: false,
    }
    this.displayModal = this.displayModal.bind(this);
  }

  displayModal(show) {
    this.setState({
      isVisible: show
    })
  }

  render() {
    return (
      <Container>
        <myModal
        displayModal={this.displayModal}
        isVisible={this.state.isVisible}
        />

        <View>
          <TouchableOpacity
          style={styles.button}
          onPress{() => this.displayModal(true)} >
            <Image />
          </TouchableOpacity>
        </View>
      </Container>
    )
  }
}

我在自己的文件中有模态框，它看起来像这样(myModal.js):

import { 
    Button, 
    Card, 
    CardItem, 
    Container, 
    Text, 
    View } from 'native-base';
import { Modal, StyleSheet } from 'react-native';
import React, { Component } from 'react';

export default class myModal extends Component {

    render() {
            return (
                <Container>
                    <Modal
                    transparent 
                    animationType='fade'
                    visible={this.props.isVisible} 
                    onRequestClose={() => this.props.displayModal(false)} 
                    >
                        <View>
                           // My view stuff
                        </View>
                    </Modal>
                </Container>
            )
     }
}

我尝试将控制台日志放入模态文件中，以查看状态是否真的在改变，而且看起来确实如此。我在 render() 和 componentDidUpdate() 中添加了 isVisible 状态的日志，一旦我按下 GameScreen 中的按钮，它总是注销 true，但似乎模式忽略了它。当我手动将 'visible' 属性更改为 true 时，它​​显示得很好，所以我想渲染的内容似乎没有问题。

我还尝试在生产模式下运行 expo，因为有些人提到了开发模式的问题并对原生模式使用react。按照 expo 文档的建议，我使用“expo start --no-dev --minify”启动了 Metro 捆绑程序，但问题仍然存在。

正如我上面所说，这种确切的方法在应用程序的其他部分运行良好，但由于某种原因似乎不喜欢 GameScreen。而且，这个问题只发生在 iOS 上。我没有任何其他 iphone，也无法访问 xCode 的 mac，所以我猜它可能是手机本身，但它可以很好地呈现我在我的应用程序中拥有的其他模式。一段时间以来，我一直在敲击键盘试图找出这个奇怪的错误，所以感谢您的任何回复!

Answer 1

所以我刚刚想通了，这是一个愚蠢的解决方案，我希望对其他人有所帮助。谢谢@Kamal Hossain，您的建议帮助我诊断出问题。

所以在我的 GameScreen 中，我使用了一个名为 react-native-actions-sheet 的 API，这是一个漂亮的小抽屉 UI 组件，它持有试图打开模式的按钮。该按钮在按下后也关闭了抽屉。按钮与状态交互很好，但我认为关闭抽屉的过程以某种方式与模态渲染混淆。

我的工作解决方案是让按钮等待几分之一秒，然后再尝试在 ios 上打开模式，现在它工作得很好:

<TouchableOpacity
  onPress={() => {
    // closes drawer
    this.props.toggleActionSheetVisibility();
    // waits if on ios and then opens modal
    setTimeout(() => this.displayModal(true), Platform.OS === "ios" ? 200 : 0); 
  }}
/>

我不知道为什么它只发生在 ios 上，但我希望这对 future 的人有所帮助。