react-native弹窗Modal

在真机上的效果

• 点击Show Model弹出Modal弹窗，Modal弹窗的内容和显示的位置都可以自己自定义。我在官网的例子上加了点样式，实现了弹窗的居中和灰色背景。

  
  Modal

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

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

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

  render() {
    return (
      <View>
        <Modal
          animationType="slide"
          transparent={true}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            alert("Modal has been closed.");
          }}
        >
          <View style={{height:Dimensions.get('window').height, justifyContent:'center', alignItems:'center', backgroundColor:'rgba(0,0,0,0.5)'}}>
            <View style={{height:250,  width:300, margin:20, backgroundColor:'white'}}>
              <View style={{flex:1, justifyContent:'center', alignItems:'center', borderWidth:1, borderColor:'#eee'}}>
                 <Text>Hello World!</Text>
              </View>
              <TouchableHighlight
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}
                style={{height:50, justifyContent:'center', alignItems:'center'}}
              >
                <Text>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>

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

• 这个弹窗也可以从外部引入到需要用到的父组件上,具体代码如下：

  
  涉及到r n的父子组件通信

父组件App.js

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

import ConfirmModal from './src/confirmModal'

export default class App extends Component {
  state = {
    modalVisible: false,
    content:'I come from Parent component'
  };

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

  render() {
    return (
      <View>
        <ConfirmModal
         modalVisible={this.state.modalVisible}
         content={this.state.content}
         callback={this.setModalVisible.bind(this)}
        >
        </ConfirmModal>

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

子组件confirmModal.js

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

export default class confirmModal extends Component {

  _setModalVisible(visible) {
    this.props.callback(visible)
  }

  render() {
    return (
        <Modal
          animationType="slide"
          transparent={true}
          visible={this.props.modalVisible}
          onRequestClose={() => {
            alert("Modal has been closed.");
          }}
        >
          <View style={{height:Dimensions.get('window').height, justifyContent:'center', alignItems:'center', backgroundColor:'rgba(0,0,0,0.5)'}}>
            <View style={{height:250,  width:300, margin:20, backgroundColor:'white'}}>
              <View style={{flex:1, justifyContent:'center', alignItems:'center', borderWidth:1, borderColor:'#eee'}}>
                 <Text>{this.props.content}</Text>
              </View>
              <TouchableHighlight
                onPress={() => {
                  this._setModalVisible(!this.props.modalVisible);
                }}
                style={{height:50, justifyContent:'center', alignItems:'center'}}
              >
                <Text>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>
    );
  }
}

官网的例子https://reactnative.cn/docs/modal/