web-dev-qa-db-ja.com

反応ネイティブでモーダルを閉じる方法

私はネイティブの開発に反応する初心者です。反応でモーダルの外側を押すとモーダルコンポーネントを閉じたいのですが。以下は私のコードです。

state = {
    visibleModal : false,
};

_hideModal(){
  this.setState({
    visibleModal: true,
  })
}


render(){
    return(
        <View style={
            [styles.container,
                {backgroundColor: this.state.visibleModal ? 'rgba(47, 60, 73, 0.75)': 'white'}
            ]}>

            <Text>Text Behind Modal</Text>

            { this._renderButton('BUTTON', () => this.setState({ visibleModal: true}) ) }
            <TouchableWithoutFeedback onPress={() => {this._hideModal()}}>
            <Modal animationType={"slide"}
                   transparent={true}
                   visible={this.state.visibleModal}>

                      <View style={styles.modalContent}>
                          <Row />
                      </View>

            </Modal>
          </TouchableWithoutFeedback>
        </View>
    );
}

}

reactjsreact-nativereact-redux
12
HSBP

質問 ：

モーダルの外側をクリックしたときにモーダルを閉じる。

解決：

TouchableWithoutFeedbackの関数呼び出しを削除するだけで機能します。

    <TouchableWithoutFeedback onPress={() => {}}>
  <Modal animationType={"slide"}
               transparent={true}
               visible={this.state.visibleModal}>

                  <View style={styles.modalContent}>
                      <Row />
                  </View>
        </Modal>
</TouchableWithoutFeedback>
0
Akshay Yeole