本文共 2371 字，大约阅读时间需要 7 分钟。

效果图

image.png

提供的方法 和 属性

ref.show() // ref 主动调用显示打开  ref.hide() // ref 主动调用隐藏关闭  modalBoxHeight: 300, // 盒子高度  modalBoxBg: '#fff', // 盒子背景色  hide: function () { }, // 关闭时的回调函数  transparentIsClick: true  // 透明区域是否可以点击

简单使用方式

import React, { Component } from 'react'import PopUp from './PopUp'import { View, Text, TouchableOpacity } from 'react-native'export default class App extends Component {  render() {    return (      
           
    
      { this.popUp.show() }}>打开弹框
            
    
      this.popUp = ref}>          
     
       { this.popUp.hide() }} style={
  { alignItems: 'center', backgroundColor: '#316DE6', height: 45, width: 80, borderRadius: 8, alignSelf: 'center', justifyContent: 'center', marginTop: 50 }}>            
      
       关闭弹框
                
             
          
       )  }}

组件代码

import React, { Component } from 'react'import { StyleSheet, View, TouchableOpacity, Animated, Easing, Dimensions } from 'react-native'/** * 弹出层 */const { width, height } = Dimensions.get('window')export default class PopUp extends Component {  constructor(props) {    super(props)    this.state = {      offset: new Animated.Value(0),      show: false    }  }  in() {    Animated.timing(      this.state.offset,      {        easing: Easing.linear,        duration: 300,        toValue: 1      }    ).start()  }  out() {    Animated.timing(      this.state.offset,      {        easing: Easing.linear,        duration: 300,        toValue: 0      }    ).start()    setTimeout(      () => this.setState({ show: false }),      300    )  }  show() {    this.setState({      show: true    }, this.in())  }  hide() {    this.out()  }  defaultHide() {    this.props.hide()    this.out()  }  render() {    let { transparentIsClick, modalBoxBg, modalBoxHeight } = this.props    if (this.state.show) {      return (        
             
    
                 {/* 
      */}          
              
    
                 {this.props.children}          
            
         )    }    return 
     }}const styles = StyleSheet.create({  container: {    width: width,    backgroundColor: 'rgba(0, 0, 0, 0.6)',    position: 'absolute',    top: 0,    zIndex: 9  },  modalBox: {    position: 'absolute',    width: width  }})PopUp.defaultProps = {  modalBoxHeight: 300, // 盒子高度  modalBoxBg: '#fff', // 背景色  hide: function () { }, // 关闭时的回调函数  transparentIsClick: true  // 透明区域是否可以点击}

转载地址：http://vpgni.baihongyu.com/