React-Native：模式关闭功能

我目前正在遵循这里给出的模态示例

代码可以工作，它确实显示了一个模态框

但除了通过TouchableHighlight onPress事件的功能外，没有“关闭”功能

是否可以通过拐角处的“X”实现“关闭模式”功能

我查看了道具，但找不到任何道具

那么这是否意味着仅使用TouchableHighlight的onPress事件就可以控制模式的关闭

App.js代码

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>
    );
  }
}

import React，{Component}来自'React'；
从“react native”导入{Modal，Text，TouchableHighlight，View}；
导出默认类ModalExample扩展组件{
状态={
modalVisible:错误，
}
setModalVisible（可见）{
this.setState（{modalVisible:visible}）；
}
render（）{
返回(
{警报（“模式已关闭。”）}
>
你好，世界！
{
this.setModalVisible（！this.state.modalVisible）
}}>
隐藏模态
{
此.setModalVisible（true）
}}>
显示模态
);
}
}

从“React”导入React，{Component}；
从“react native”导入{Modal，Text，TouchableHighlight，View}；
导出默认类ModalExample扩展组件{
状态={
modalVisible:错误，
}
setModalVisible（可见）{
this.setState（{modalVisible:visible}）；
}
closeModal=（）=>{
this.setState（{modalVisible:false}）
}
render（）{
返回(
{警报（“模式已关闭。”）}
>
你好，世界！
{
this.setModalVisible（！this.state.modalVisible）
}}>
隐藏模态
//使用您喜欢的样式创建“X”按钮
{
此.setModalVisible（true）
}}>
显示模态
);
}
}

您只需将一个按钮添加到具有首选样式的模式中，并在按钮的onPress侦听器上将状态变量

modalVisible

设置为

false

，以隐藏模式。

import React，{Component}from'React'；
从“react native”导入{Modal，Text，TouchableHighlight，View}；
导出默认类ModalExample扩展组件{
状态={
modalVisible:错误，
}
setModalVisible（可见）{
this.setState（{modalVisible:visible}）；
}
closeModal=（）=>{
this.setState（{modalVisible:false}）
}
render（）{
返回(
{警报（“模式已关闭。”）}
>
你好，世界！
{
this.setModalVisible（！this.state.modalVisible）
}}>
隐藏模态
//使用您喜欢的样式创建“X”按钮
{
此.setModalVisible（true）
}}>
显示模态
);
}
}

您只需使用首选样式向模式添加一个按钮，并在按钮的onPress侦听器上将状态变量

modalVisible

设置为

false

，以隐藏模式。

我最近使用过（在生产中）并发现该库对模式非常有用。它在本机模态类的基础上进行了扩展，为您提供了额外的功能，如滑动手势。一定要去看看。我最近（在生产中）使用了这个库，发现它对modal非常有用。它在本机模态类的基础上进行了扩展，为您提供了额外的功能，如滑动手势。一定要去看看。

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>
    );
  }
}