React Native - 如何在视图上实现模态？

Question

根据标题，我想在点击视图时打开一个模态

app.js

<View>
    <MediaBar onClick={this.toggleModal}> />

      <Modal show={this.state.isOpen}
      onClose={this.toggleModal}>
      `Here's some content for the modal`
    </Modal>
 </View>

Mediabar.js：https://pastebin.com/6bW5gz99

modal.js：https://pastebin.com/3vQgLyTg

Answer 1

Modal组件具有visible属性。

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

您只需使用父组件状态更新其值。

Answer 2

我会做这样的事情

App.js

import React, { Component } from 'react';
import { View, Text, Modal, TouchableWithoutFeedback, Dimensions, TouchableOpacity } from 'react-native';

class App extends Component {
  state = {
    modalVisible: false
  }
  render() {
    return(
      <View style={this.styles.viewStyle}>
        <Modal visible={this.state.modalVisible} 
            transparent={true}>
            <View style={this.styles.viewStyle}>
              <View style={this.styles.dialogStyle}>
              </View>
            </View>
        </Modal>
        <View style={this.styles.anotherView}>
          <TouchableOpacity onPress={()=> this.setState({ modalVisible: true})}>
            <Text>Hello</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }

  styles = {
    viewStyle: {
      flex:1,
      alignItems: 'center',
      justifyContent: 'center'
    },
    dialogStyle: {
      height: Dimensions.get('window').height*0.2,
      width: Dimensions.get('window').width*0.9,
      backgroundColor: '#d3d3d3',
      elevation: 10,
      borderRadius: 5
    },
    anotherView:{
      flex: 1,
      backgroundColor: 'white',
      alignItems: 'center',
      justifyContent: 'center'
    }
  }


}



export default App;

要实现如下模式：