Question

我正在尝试将覆盖功能与我的react-native应用程序集成在一起。我找到了一个完美的npm模块：react-native-modal-overlay。

当我测试示例代码时，会出现叠加层，但是当按下外部时叠加层不会消失。该文档不是最好的文档，此外，似乎我不是唯一的who has faced this problem。

以下是用户has provided的示例代码：

/**
 * 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);

为什么在按下外部时覆盖层没有消失？

Answer 1

github上的示例代码似乎具有一些您上面的示例所没有的重要代码。即，定义了onClose（）函数：

//assuming that the HtmlDocument has already loaded string test = doc.GetElementbyId("search_posts").SelectNodes("//article").First().OuterHtml; test = doc.DocumentNode.GetAttributeValue("data-id", "NULL");

onClose = () => this.setState({ modalVisible: false});行还引用了onClose（）：

<Overlay>

为什么覆盖层不消失？ [react-native-modal-overlay]

1 个答案: