本地反应：模态始终可见

我知道有关此主题的问题，但是并没有解决我的问题。我希望在按下“入门”按钮时渲染模态，但是模态始终显示为该红色框，而不是在我的显示器上弹出。有人可以帮我做吗，以便仅在按下“入门”时才会渲染模态，以便模态

我的模态在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>