尝试从home组件按钮打开react-native模态组件时，为什么会出现错误？

Question

我有一个模态组件，当打开模态的按钮位于组件内部时，它可以正常工作。当我尝试使用按钮从home组件中打开模式组件时，它不起作用。

当我尝试打开

// my modal component file

class LanguageModal extends Component {

    state = {
        isVisible: false,
        value: 0
      };

      setModalVisible(visible) {
        this.setState({isVisible: visible});
      }

      selectLanguage = (value) => {
        if (value === 0) {
          alert('English')
        } else {
          alert('French')
        }
      }

    render() {
      let language = [
        {label: 'English', value: 0 },
        {label: 'French', value: 1 }
      ];
        return (
          <View>
                <Modal
                  animationType='slide'
                  transparent={false}
                  visible={this.state.isVisible}
                  onRequestClose={() => {
                    // Alert.alert('Modal has been closed.');
                    <LanguageModal /> // prevents using back btn with modal showing
                }}>

                  {/* Modal display here */}
                  <View style={styles.optionsAndButtons}>
                      <RadioForm
                        radio_props={language}
                        initial={0} // you can set as per requirement. 0 for English
                        onPress={(value) => {this.setState({value:value})}}
                        buttonSize={15} // size of radiobutton
                        buttonOuterSize={30}
                        buttonColor={'#666'}
                        selectedButtonColor={'green'}
                        selectedLabelColor={'green'}
                        labelStyle={{fontSize:15}}
                        animation={true}
                      />


                    <View style={styles.optionButtons}>

                      <View style={styles.skipButton}>
                          <Button
                          color='#666'
                          title='SKIP'
                            onPress={() => {
                              this.setModalVisible(!this.state.isVisible);
                            }} />
                      </View>

                      <View style={styles.okButton}>
                        <Button
                        color='green'
                        title='OK'
                          onPress={() => this.selectLanguage(this.state.value)}
                            // this.setModalVisible(!this.state.isVisible);

                           />
                      </View>

                    </View>
                  </View>

                </Modal>


              <View style={{width: 300, justifyContent: 'flex-end', left: 30, top: 400}}>
                <Button
                color='green'
                title='Login'
                  onPress={() => {
                    this.setModalVisible(true);
                  }} />
              </View>
          </View>
        );
    }
}


// my homescreen component

When I try to open modal from home, it's not working. I basically moved state and and the function to the homescreen component from the modal component.

class HomeScreen extends Component {
    state = {
        isVisible: false
    }

    setModalVisible = (visible) => {
        this.setState({isVisible: visible});
    }

    render() {
        return (
          <>
            <StatusBar barStyle="dark-content" />
            <View style={styles.container}>
              <Text style={styles.heading}>The Sandbox</Text>
              <Text style={styles.subheading}>Digital Playground</Text>
              <Text>{' '}</Text>

                <View style={styles.btnContainer}>
                  <Button 
                  title='Login' 
                  onPress={() => {
                  <LanguageModal isModalVisible={this.setModalVisible(true)} />}
                  }
                />
              </View>
            </View>
          </>
        );
      }
    };

我希望按钮可以打开模态组件，但相反，我收到一条错误消息，提示“ ReferenceError：未定义setModalVisible” .....实际上是。