问react native:模式始终可见

EN

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;

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>