ファクトネイティブ：モーダル閉じ機能

Question

私は現在、ここで与えられたモーダルの例に従っています。

https://facebook.github.io/react-native/docs/modal.html

コードが動作し、それが実際にモーダルボックスを示しています。

ただし、TouchableHighlight onPressイベント以外の「閉じる」機能はありません。

コーナーに「X」で「近似モーダル」機能を持たせることはできますか？

私は小道具を点検し、私は何も見つけることができません。

これは、TouchableHighlightのonPressイベントだけを使用すると、モーダルの終了を制御できることを意味しますか？

App.jsコード

あなただけ隠すため falseに可変状態 modalVisibleを設定し、お好みのスタイルで、ボタンのリスナーたonPressにモーダルにボタンを追加する必要が

import React, { Component } from 'react'; 
import { Modal, Text, TouchableHighlight, View } from 'react-native'; 

export default class ModalExample extends Component { 

    state = { 
    modalVisible: false, 
    } 

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

    render() { 
    return (
     <View style={{marginTop: 22}}> 
     <Modal 
      animationType="slide" 
      transparent={false} 
      visible={this.state.modalVisible} 
      onRequestClose={() => {alert("Modal has been closed.")}} 
      > 
     <View style={{marginTop: 22}}> 
      <View> 
      <Text>Hello World!</Text> 

      <TouchableHighlight onPress={() => { 
       this.setModalVisible(!this.state.modalVisible) 
      }}> 
       <Text>Hide Modal</Text> 
      </TouchableHighlight> 

      </View> 
     </View> 
     </Modal> 

     <TouchableHighlight onPress={() => { 
      this.setModalVisible(true) 
     }}> 
      <Text>Show Modal</Text> 
     </TouchableHighlight> 

     </View> 
    ); 
    } 
} 

Answer 1

import React, { Component } from 'react'; 
import { Modal, Text, TouchableHighlight, View } from 'react-native'; 

export default class ModalExample extends Component { 

    state = { 
    modalVisible: false, 
    } 

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

    closeModal =() => { 
     this.setState({modalVisible: false}) 
    } 

    render() { 
    return (
     <View style={{marginTop: 22}}> 
     <Modal 
      animationType="slide" 
      transparent={false} 
      visible={this.state.modalVisible} 
      onRequestClose={() => {alert("Modal has been closed.")}} 
      > 
     <View style={{marginTop: 22}}> 

      <View> 
      <Text>Hello World!</Text> 

      <TouchableHighlight onPress={() => { 
       this.setModalVisible(!this.state.modalVisible) 
      }}> 
       <Text>Hide Modal</Text> 
      </TouchableHighlight> 
      </View> 
     <CloseButton onPress={this.closeModal} /> // Create your 'X' button with your preferred styling 
     </View> 
     </Modal> 

     <TouchableHighlight onPress={() => { 
      this.setModalVisible(true) 
     }}> 
      <Text>Show Modal</Text> 
     </TouchableHighlight> 

     </View> 
    ); 
    } 
} 

モーダル。