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>

Answer 2

对于本机使用ES6风格的自定义函数：

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

代码应该是：this.setModalVisible(!this.state.modalVisible)

介绍＆amp;关闭模态

2 个答案: