介绍&关闭模态

时间:2016-09-04 18:44:10

标签: ios modal-dialog react-native react-jsx

所以我在下面有一个初始屏幕,你可以点击一个按钮并显示一个模态屏幕:

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中的模态?

谢谢。

2 个答案:

答案 0 :(得分:1)

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

初始组件:

<ModalComponent closeModal={this.setModalVisible} />

并在ModalComponent上调用它:

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

答案 1 :(得分:0)

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

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

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