react-native - 即使在设置 visible={false} 时，React Native Modal 核心组件始终可见并带有红色边框

Question

我是 React Native 的新手，正在尝试根据文档 https://reactnative.dev/docs/modal 创建模态框.

我尝试在一个全新的项目中复制粘贴模态的函数/类组件示例。但我看到的只是一个持续显示的带有红色边框的框，即使我调整了 visible = {false}。但是，当我添加 console.log() 函数时，它的输出与预期的一样。有人对此有任何问题吗？它是这样的:react native modal is persistent with red border 另外，我看到其他人在这篇文章中发布了解决方案:react native modal always visible但没有一个解决方案有效。

代码与文档中的完全一致。 https://reactnative.dev/docs/modal .

import React, { Component } from "react";
import {
  Alert,
  Modal,
  StyleSheet,
  Text,
  TouchableHighlight,
  View
} from "react-native";

class App extends Component {
  state = {
    modalVisible: false
  };

  setModalVisible = (visible) => {
    this.setState({ modalVisible: visible });
    console.log(this.state.modalVisible)
  }

  render() {
    const { modalVisible } = this.state;
    return (
      <View style={styles.centeredView}>
        <Modal
          animationType="slide"
          transparent={true}
          visible={modalVisible}
          onRequestClose={() => {
            Alert.alert("Modal has been closed.");
          }}
        >
          <View style={styles.centeredView}>
            <View style={styles.modalView}>
              <Text style={styles.modalText}>Hello World!</Text>

              <TouchableHighlight
                style={{ ...styles.openButton, backgroundColor: "#2196F3" }}
                onPress={() => {
                  this.setModalVisible(!modalVisible);
                }}
              >
                <Text style={styles.textStyle}>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>

        <TouchableHighlight
          style={styles.openButton}
          onPress={() => {
            this.setModalVisible(true);
          }}
        >
          <Text style={styles.textStyle}>Show Modal</Text>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  centeredView: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    marginTop: 22
  },
  modalView: {
    margin: 20,
    backgroundColor: "white",
    borderRadius: 20,
    padding: 35,
    alignItems: "center",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 2
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5
  },
  openButton: {
    backgroundColor: "#F194FF",
    borderRadius: 20,
    padding: 10,
    elevation: 2
  },
  textStyle: {
    color: "white",
    fontWeight: "bold",
    textAlign: "center"
  },
  modalText: {
    marginBottom: 15,
    textAlign: "center"
  }
});

export default App;

Answer 1

这显然是 react-native-modal 在网络上显示时的一个已知问题。好消息是有一个名为 modal-enhanced-react-native-web 的包可以解决这个特殊问题。 只需安装这个功能强大的软件包 npm i modal-enhanced-react-native-web，您就不会再遇到这个问题了