オーバーレイをクリックしてネイティブモーダルを反応させますか？

Question

transparentオプションがtrueの場合、オーバーレイをクリックしてreact native modalを閉じることはできますか？ドキュメンテーションはそれについて何も提供しません。出来ますか？

Answer 1

私が正しく理解していれば、ユーザーが外部をクリックしたときにモーダルを閉じたいと思うでしょうか？

そうならば、私はいくつかの時間前に、この検索し、私が覚えている唯一の解決策は、（私がこれまで使ってきた 一つである）この1だった：

render() { 
    if (!this.state.modalVisible) 
    return null 
    return (
    <View> 
     <Modal 
      animationType="fade" 
      transparent={true} 
      visible={this.state.modalVisible} 
      onRequestClose={() => {this.setModalVisible(false)}} 
     > 
      <TouchableOpacity 
      style={styles.container} 
      activeOpacity={1} 
      onPressOut={() => {this.setModalVisible(false)}} 
      > 
      <ScrollView 
       directionalLockEnabled={true} 
       contentContainerStyle={styles.scrollModal} 
      > 
       <TouchableWithoutFeedback> 
       <View style={styles.modalContainer}> 
        // Here you put the content of your modal. 
       </View> 
       </TouchableWithoutFeedback> 
      </ScrollView> 
      </TouchableOpacity> 
     </Modal> 
    </View> 
) 
} 

// Then on setModalVisible(), you do everything that you need to do when closing or opening the modal. 
setModalVisible(visible) { 
    this.setState({ 
     modalVisible: visible, 
    }) 
} 

説明

これは基本的に画面全体でTouchableOpacityを使用して、ユーザーがモーダルを閉じるためにクリックするときに取得します。 TouchableWithoutFeedbackは、TouchableOpacityがModalの内部で動作するのを避けるためのものです。

もっと良い解決策がある場合は、ここをクリックしてください。窓と上記の別のいずれかの下

<touchableObacity onPress={()=>this.setState({modalVisibilty:false})}> 
<View style={{opacity:0, flex:1 }}/> 
</touchableOpacity> 

をし、自分の画面に合わせてレイアウトスタイルを変更します。

Answer 2

我々は追加して、それをうまくすることができます。

説明：

あなたはユーザーのタッチをキャッチし、falseにモーダル表示状態を変更するには2つの大きな隠しボタンを行います。