ios - 呈现和关闭模式

Question

所以我下面有一个初始屏幕，您可以单击按钮并显示模式屏幕:

import SettingsScreen from './SettingsScreen';
...
export default class InitialScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {modalVisible: false};
  }

  setModalVisible(visible) {
    this.setState({modalVisible: visible});
  }
  render() {
    return (
      <View>
          <NavigationBar
            title={{ title: 'Initial Screen', tintColor:  'white', }}
            leftButton={
              <TouchableOpacity onPress={() => {
                this.setModalVisible(!this.state.modalVisible)
              }}>
                <Image style={styles.leftButton} source={require('./../img/settings.png')} />
              </TouchableOpacity>
            }
            rightButton={{ title: 'Forward', tintColor: 'white' }}
            style={{ backgroundColor: '#2196F3', }}
            statusBar={{ tintColor: '#1976D2', style: 'light-content' }}
          />
          <Modal
          animationType={"slide"}
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {alert("Modal has been closed.")}}
          >
          <SettingsScreen />          
        </Modal>
      </View>
    );
  }
}

它可以工作，但现在在我的模态屏幕中我有一个按钮可以让你关闭模态:

import ...
export default class ModalScreen extends Component {
    render() {
        return (
          <View>
            <TouchableOpacity onPress={() => {
                this.props.setModalVisible(!this.state.modalVisible)
              }}>
                <Image source={require('./../img/close.png')} />
              </TouchableOpacity>
          </View>  
        );
    }
}

但它给我一个错误，说 this.props.setModalVisible(!this.state.modalVisible) 不是函数。我将如何关闭 ModalScreen 中的模式？

谢谢。

Answer 1

您应该将setModalVisible() 函数传递给模态组件

初始组件:

<ModalComponent closeModal={this.setModalVisible} />

在 ModalComponent 上这样调用它:

  <TouchableOpacity onPress={() => {  
        this.props.closeModal(false)
      }}>
    <Image source={require('./../img/close.png')} />
  </TouchableOpacity>