自定义React Native Modal,支持全屏弹框

背景

在使用 React Native(以下简称 RN ) 开发移动App时,会碰到很多弹窗的场景,虽然 RN自带了一个 Modal 组件可以实现这一效果,但是由于Android和iOS平台的差异性,使得使用同一个组件开发出来的效果会略有差异。比如,Modal组件在iOS平台,弹框是全屏的,但是在Android平台却不是,会有状态栏,如下效果。
在这里插入图片描述
之所以这样,是因为Android 端的Modal 控件使用的Dialog,内容无法从状态栏处开始布局。而iOS是基于 Window 的,所以是覆盖在视图上面的。如果要让双端的样式一样,那么需要对Android进行特殊处理。

由于RN的Modal 组件在Android中是使用Dialog实现的,所以如果要实现一个全屏的弹框,那么就需要自定义一个全屏展示的Dialog。

1,自定义Dialog

首先,我们新建一个继承自Dialog的自定义组件FullModal,代码如下:

package com.cgv.cn.movie.modal;

imp
xiangzhihong8 CSDN认证博客专家 HTTPS 前端框架 JavaScript
著有《React Native移动开发实战》、《Kotlin入门与实战》、《Weex跨平台开发与实战》、《React Native开发进阶》和《Flutter跨平台开发实战》,正努力完成《Android应用架构实战》
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页
实付 19.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值