React Native 弹出框组件

本文原创首发于公众号:ReactNative开发圈,转载需注明出处。

React Native 弹出框组件:react-native-popup-dialog,纯JS组件,支持动画,支持iOS和Android,安装使用方便。

演示动画

安装方法

npm install --save react-native-popup-dialog

使用示例

import PopupDialog,{ SlideAnimation } from 'react-native-popup-dialog';

const slideAnimation = new SlideAnimation({
  slideFrom: 'bottom',});

<View style={styles.container}>
  <PopupDialog
    ref={(popupDialog) => { this.popupDialog = popupDialog; }}
    dialogAnimation={slideAnimation}
  >
    <View>
      <Text>Hello</Text>
    </View>
  </PopupDialog>
</View>

支持三种动画:FadeAnimation(淡入淡出)、ScaleAnimation(缩放)、SlideAnimation(滑动)

API说明

  • dialogTitle – 弹出框标题
  • width - 弹出框的宽度,可以写300或者0.5。0.5就是设备宽度的50%
  • height - 弹出框的宽度,可以写300或者0.5。0.5就是设备高度的50%
  • dialogAnimation - 动画类型,FadeAnimation、ScaleAnimation、SlideAnimation
  • haveOverlay - 是否显示Overlay
  • dismissOnTouchOutside - 点击外部是否关闭弹出框
  • show - 显示弹出框

完整示例

完整代码GitHub - forrest23/ReactNativeComponents: React Native组件大全,介绍React Native常用组件的使用方法和使用示例
本次示例代码在 Component04文件夹中。请不要吝啬你们的Star!

组件地址

GitHub - jacklam718/react-native-popup-dialog: A React Native Popup Dialog Easy Use & Support Custom Animation. For IOS & Android.

微信不让跳转外链,可以点击查看原文来查看外链GitHub内容

举手之劳关注我的微信公众号:ReactNative开发圈

相关文章

导入moment 使用方式 年月日,时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年月日
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目,发现有之前的大佬在处理...
十大React Hook库 原文地址:https://dev.to/bornfightcompany/top-10-react-hook-libraries-4065 原文...
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段,在React的整个生命周期中提供很...
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树,每一个节点可以将其称为VNode,用...
React中JSX的理解 JSX是快速生成react元素的一种语法,实际是React.createElement(component, props, ....