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