呈现和关闭模态

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

React Native 中的自定义函数使用 ES6 风格：

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

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

Answer 2

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

初始组件：

<ModalComponent closeModal={this.setModalVisible} />

在 ModalComponent 上这样调用它：

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

呈现和关闭模态

Presenting & Closing a modal

modal-dialog

ios

react-jsx

react-native