javascript - react 原生 : modal always visible

Question

我知道有关于此主题的问题，但这并没有解决我的问题。我希望在按下“开始”按钮时呈现模式，但模式始终显示为这个红色框，而不是弹出我的显示器。有人可以帮我制作它，以便模态仅在按下“开始”时呈现，并且模态

我的模态在 signUpModal.js 中定义为:

import React, {Component} from 'react';
import {StyleSheet, Text, View, Button} from 'react-native';
import Modal from 'react-native-modal';


const SignUpModal = (props) => (

    <Modal 
        isVisible={props.display}
        animationType={'slide'}
        onRequestClose={() => console.log('closed')}
    >
        <View style={{ flex: 1 }}>
        <Text>I am the modal content!</Text>
        <Button title="Hide modal" />
        </View>
    </Modal>
);
    
export default SignUpModal;

我的模态是从 HomePage.js 调用的。相关代码如下:

import React, {Component} from 'react';
import {StyleSheet, Text, View, Button, Image} from 'react-native';
import Swiper from 'react-native-swiper/src';
import { LinearGradient } from 'expo-linear-gradient';


import SignUpModal from '../modals/signUpModal';

export default class HomePage extends Component {
  
  constructor(props) {
    super(props);
    this.state = {
      isModalVisible: false
    };
  }

 
  toggleModal = () => {
    this.setState({isModalVisible: !this.state.isModalVisible});
  };

 render() {
   return (
    <Swiper
    loop={false}
    showsPagination={false}
    index={0}
    showsButtons = {true}
    >
     <View style={styles.container}>
      <LinearGradient colors={['rgba(14, 25, 39, 0.5)', 'rgba(11, 19, 27, 0.8)']} style={styles.container}>
       <Text style={styles.welcome}>Invest In Your Favorite Players</Text>
       <Text style={styles.instructions}>{subtitle}</Text>
       <Button title = "Get Started" onPress = {this.toggleModal} style={{width:150, height:50}}/>
       <SignUpModal
          display = {this.state.isModalVisible}
       />
       <Image
          style={{ width: 335, height: 356 }}
          source={require('../assets/images/PSHomePageMobile.png')}
        />
      </LinearGradient>
     </View>

Answer 1

这显然是在 web 上显示时 react-native-modal 的一个已知问题。相反，使用 modal-enhanced-react-native-web组件工作。