Реагировать на собственную функцию вызова на исходный компонент из модального

Question

Как я могу вызвать функцию из компонента root в модальном окне, которое отображается поверх компонента?

My HomePage. js вызывает компонент следующим образом:

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

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

 render() {
   return (
     <View style={styles.container}>
       <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')}
        />
     </View>
   );
 }
}

Тогда мой модальный вид отображается следующим образом. Моя цель состоит в том, чтобы, когда пользователь нажимает, что у него есть учетная запись, он сможет перейти к signInModal. Для этого я хочу сначала выключить signUpModal.

const SignUpModal = (props) => {

    const [firstName, setFirstName] = useState('');

    return(
        <Modal isVisible = {props.display}>
                <View style={styles.container2}>
                <ScrollView style={styles.scrollView}>
                <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                        <Text style={styles.title}>Sign Up</Text>
                        <View>
                                <Text style={styles.fieldTitle}>Have an account?</Text>
                                <Text style={styles.accent} onPress={()=>HomePage.toggleModal()}>Sign In</Text>
                        </View>      
                </View>
                <Text style={styles.fieldTitle}>First Name</Text>
                <TextInput
                        style={styles.textbox}
                        onChangeText={firstName => setFirstName(firstName)}
                        defaultValue={firstName}
                />

                <Button title="Sign Up"/>
                </ScrollView>
                </View>
        </Modal>
        );
}
    
export default SignUpModal;

Answer 1

Вы должны передать функцию обратного вызова своему модальному окну, как показано ниже

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

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

 render() {
   return (
     <View style={styles.container}>
       <Button title = "Get Started" onPress = {this.toggleModal} style={{width:150, height:50}}/>
       <SignUpModal display = {this.state.isModalVisible} toggle={this.toggleModal}/>
       <Image
          style={{ width: 335, height: 356 }}
          source={require('../assets/images/PSHomePageMobile.png')}
        />
     </View>
   );
 }
}

Вы можете вызвать эту функцию внутри модального окна

<Button title="Sign Up" onPress={props.toggle}/>