React native 为什么赢了';覆盖层不会消失吗?[反应本机模态叠加]

React native 为什么赢了';覆盖层不会消失吗?[反应本机模态叠加],react-native,React Native,我正在尝试将覆盖功能与我的react本机应用程序集成。我为它找到了一个完美的npm模块: 当我测试示例代码时,覆盖显示出来,但当按下外部时不会消失。文档不是最好的,而且,我似乎不是唯一的一个 以下是一个用户可以使用的示例代码: /** *示例React本机应用程序 * https://github.com/facebook/react-native *@flow */ 从“React”导入React,{Component}; 进口{ 评估学, 样式表, 文本, 视图,按钮 }从“反应本机”; 从

我正在尝试将覆盖功能与我的react本机应用程序集成。我为它找到了一个完美的npm模块:

当我测试示例代码时,覆盖显示出来,但当按下外部时不会消失。文档不是最好的,而且,我似乎不是唯一的一个

以下是一个用户可以使用的示例代码:

/**
*示例React本机应用程序
* https://github.com/facebook/react-native
*@flow
*/
从“React”导入React,{Component};
进口{
评估学,
样式表,
文本,
视图,按钮
}从“反应本机”;
从“反应本机模式覆盖”导入覆盖;
导出默认类AwesomeProject扩展组件{
状态={modalVisible:false}
showOverlay(){
this.setState({modalVisible:true})
}
hideOverlay(){
this.setState({modalVisible:false})
}
render(){
返回(
示例:反应本机模式覆盖
要开始,请编辑index.ios.js
按Cmd+R重新加载,{'\n'}
用于开发菜单的Cmd+D或shake
一些叠加标题
在《圣经》的《圣经改革》中,以及在《圣经》的《圣经》的《圣经》的《圣经》中,都有一个关于上帝的装置。在《圣经》的《圣经》的《圣经》中,没有一个关于上帝的装置。根据《圣经》的《圣经》的《圣经》的《圣经》的《圣经》的《圣经》的《圣经》中,没有一个关于上帝的装置。根据《圣经》的《圣经》的《圣经》的《圣经》的《圣经》的《圣经》中,有一个关于上帝的《圣经》的《圣经》的《圣经》中。
);
}
}
const styles=StyleSheet.create({
容器:{
弹性:1,
为内容辩护:“中心”,
对齐项目:“居中”,
背景颜色:“#F5FCFF”,
},
欢迎:{
尺寸:20,
textAlign:'中心',
差额:10,
},
说明:{
textAlign:'中心',
颜色:'#333333',
marginBottom:5,
},
});
AppRegistry.registerComponent('AwesomeProject',()=>AwesomeProject);

当按下外部按钮时,为什么覆盖层没有消失?

github上的示例代码似乎有一些重要的代码,上面的示例没有。即,定义了一个onClose()函数:

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

行也引用了onClose()


请填写问题并将代码粘贴到此处,可能有人可以帮助您设置格式。我在问题中添加了您引用的代码。请通过编辑窗口查看,以便您下次可以自己查看。
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View, Button
} from 'react-native';
import Overlay from 'react-native-modal-overlay';

export default class AwesomeProject extends Component {
  state = {modalVisible: false}

  showOverlay() {
    this.setState({modalVisible: true})
  }

  hideOverlay() {
    this.setState({modalVisible: false})
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Example: react-native-modal-overlay
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
        <Button
  onPress={this.showOverlay.bind(this)}
  title="Show Overlay"
  color="#841584"
/>

        <Overlay visible={this.state.modalVisible} closeOnTouchOutside animationType="zoomIn"
            containerStyle={{backgroundColor: 'rgba(37, 8, 10, 0.78)'}} childrenWrapperStyle={{backgroundColor: '#eee'}} >
          <Text style={{fontWeight:'300', fontSize: 20}}>Some Overlay Heading</Text>
          <View style={{borderBottomWidth: 1, width: 100, paddingTop: 10}}></View>
          <Text style={{fontWeight:'300', fontSize: 16, paddingTop: 20, textAlign:'center'}}>Lorem ipsum dolor sit amet, quo te novum tritani maiestatis. At libris reformidans mel, et modo idque pericula sit, alienum appareat cu eos. At pri tota nulla consequuntur. Est te diam erant, eum no altera dolorem facilisis. Ad per facilisi pericula postulant, id his dicta facete, alii constituto at per. Ex his alia graece democritum.
</Text>
        </Overlay>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);