基于react-native的简单消息确认框showModel

基于react-native的简单消息确认框showModel

    • 效果示例图
    • 组件代码ShowModel/index.jsx
    • 使用案例
    • device.js
    • 安装线性渐变色

效果示例图

在这里插入图片描述

组件代码ShowModel/index.jsx

import React, {forwardRef, useImperativeHandle, useState} from 'react';
import {View,Text,Modal,TouchableOpacity,StyleSheet,ScrollView,
} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import {pxToPd} from '../../common/js/device';const ShowModal = forwardRef((props, ref) => {const [visible, setVisible] = useState(false);const [options, setOptions] = useState({title: '',content: '',success: null,});const hide = type => {setVisible(false);options.success(type);};const show = params => {setOptions({...options,title: params.title,content: params.content,success: params.success,});setVisible(true);};const onCancel = () => {hide('cancel');};const onConfirm = () => {hide('confirm');};useImperativeHandle(ref, () => ({hide,show,}));return (<Modal visible={visible} animationType="fade" transparent><View style={styles.modelWrap}><View style={styles.modelContent}>{/* 标题 */}<View style={styles.modelTitle}><Text style={styles.modelTitleText}>{options.title}</Text></View>{/* 内容 */}<View style={styles.modelBlock}><ScrollView><Text style={styles.modelBlockText}>{options.content}</Text></ScrollView></View>{/* 底部按钮 */}<View style={styles.modelFooter}><TouchableOpacity onPress={onCancel}><View style={styles.Btn}><Text style={styles.cancelBtn}>取消</Text></View></TouchableOpacity><TouchableOpacity onPress={onConfirm}><View style={styles.Btn}><LinearGradientcolors={['#FFAA6B', '#FF5B23']}start={{x: 0, y: 0}}end={{x: 1, y: 0}}style={{flex: 1}}><Text style={styles.submitBtn}>确认</Text></LinearGradient></View></TouchableOpacity></View></View></View></Modal>);
});const styles = StyleSheet.create({modelWrap: {flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: 'rgba(0, 0, 0, 0.5)',},modelContent: {borderRadius: pxToPd(24),width: pxToPd(580),minHeight: pxToPd(378),backgroundColor: 'white',paddingBottom: pxToPd(35),paddingTop: pxToPd(35),paddingLeft: pxToPd(24),paddingRight: pxToPd(24),},modelTitle: {width: '100%',},modelTitleText: {textAlign: 'center',color: '#333',fontWeight: 'bold',fontSize: pxToPd(36),},modelBlock: {width: '100%',maxHeight: pxToPd(300),marginTop: pxToPd(24),},modelBlockText: {width: '100%',fontSize: pxToPd(28),fontWeight: '400',color: '#333',minHeight: pxToPd(120),lineHeight: pxToPd(40),textAlign: 'center',},modelFooter: {flexDirection: 'row',justifyContent: 'space-between',marginTop: pxToPd(30),},Btn: {width: pxToPd(250),height: pxToPd(88),borderRadius: pxToPd(44),overflow: 'hidden',},cancelBtn: {width: '100%',height: pxToPd(88),lineHeight: pxToPd(88),backgroundColor: '#f5f5f5',fontSize: pxToPd(34),fontWeight: '400',color: '#666',textAlign: 'center',},submitBtn: {width: '100%',height: pxToPd(88),lineHeight: pxToPd(88),fontSize: pxToPd(34),fontWeight: '400',color: '#fff',textAlign: 'center',},
});export default ShowModal;

使用案例

在页面中引入组件
import ShowModal from '../../componets/ShowModel';组件中注册
<ShowModal ref={showModelRef} />使用
const showModelRef = useRef(null);const showMOdel = () => {showModelRef.current.show({title: '标题',content: '内容-加油',success: res => {console.log('[返回值-12]', res);},});};

device.js

import {Dimensions, StatusBar} from 'react-native';
//RN中的尺寸单位为dp,设计稿的单位为px// 获取屏幕尺寸
const windowDimensions = Dimensions.get('window');//设备宽度,单位pd
const deviceWidthDp = windowDimensions.width;//设备高度
const windowHeight = windowDimensions.height;// 获取状态栏高度
const statusBarCurrentHeight = StatusBar.currentHeight || 0;//设计稿宽度(这里为750px),单位px
const uiWidthPx = 750;//px转pd(设计稿中的px转RN中的dp)
//计算公式:设计稿元素宽度(px)/设计稿总宽度(px)=元素的宽度(dp)/屏幕的总宽度(dp)
export const pxToPd = uiElePx => {return (uiElePx * deviceWidthDp) / uiWidthPx;
};//状态栏高度
export const statusBarHeight = () => {return statusBarCurrentHeight;
};// 计算应用程序窗口的高度
// 获取导航栏高度(如果有的话) navigationBarHeight = 0; // 设置默认值
export const appWindowHeight = (navigationBarHeight = 0) => {return windowHeight - statusBarCurrentHeight - navigationBarHeight;
};

安装线性渐变色

1.安装
npm install react-native-linear-gradient2.使用
import LinearGradient from 'react-native-linear-gradient';
<LinearGradientcolors={['#FFAA6B', '#FF5B23']}start={{ x: 0, y: 0 }}end={{ x: 1, y: 0 }}style={{ flex: 1 }}><View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text style={{ color: 'white', fontSize: 24 }}>Hello, this is a gradient background!</Text></View>
</LinearGradient>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/29912.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

整合封装服务器模块设计实现

服务器模块&#xff0c;是对当前所实现的所有模块的⼀个整合&#xff0c;并进⾏服务器搭建的⼀个模块&#xff0c;最终封装实现出⼀个gobang_server的服务器模块类&#xff0c;向外提供搭建五⼦棋对战服务器的接⼝。通过实例化的对象可以简便的完成服务器的搭建。 服务器框架 …

DNS、ARP

目录 DNS以及它的用途 DNS的解析方式 DNS的查询方式 DNS使用TCP/UDP DNS劫持 常见的DNS劫持现象 DNS劫持与HTTP劫持的不同 处理DNS劫持 DNS缓存 DNS实现负载均衡 ARP以及他的工作原理 DNS以及它的用途 DNS是域名解析服务器&#xff0c;用来将域名解析成IP。DNS工作在…

金九银十面试题之《JUC》

&#x1f42e;&#x1f42e;&#x1f42e; 辛苦牛&#xff0c;掌握主流技术栈&#xff0c;包括前端后端&#xff0c;已经7年时间&#xff0c;曾在税务机关从事开发工作&#xff0c;目前在国企任职。希望通过自己的不断分享&#xff0c;可以帮助各位想或者已经走在这条路上的朋友…

Linux | Ubuntu18.04安装RTX 4060显卡驱动完整教程

文章目录 概述一、定义介绍二、操作教程(一)、前期准备1.进入终端界面2.关闭界面显示器3.禁用其他显卡驱动4.卸载残余显卡驱动5.下载驱动(二)、安装驱动1.给驱动程序赋予权限2.安装驱动3.检查结果(三)、后续问题1.黑屏问题概述 本节详细介绍了如何在ubuntu18系统安装4060显卡的…

pnpm的高级使用

我整理了一些pnpm的高级使用&#xff1a; 并行安装&#xff1a;pnpm通过并行安装依赖项来提高安装速度。默认情况下&#xff0c;它会使用计算机的最大线程数来并行安装依赖项。你也可以使用--recursive选项来并行安装所有子项目的依赖项。 冻结依赖&#xff1a;pnpm支持将依赖…

06微服务间的通信方式

一句话导读 微服务设计的一个挑战就是服务间的通信问题&#xff0c;服务间通信理论上可以归结为进程间通信&#xff0c;进程可以是同一个机器上的&#xff0c;也可以是不同机器的。服务可以使用同步请求响应机制通信&#xff0c;也可以使用异步的基于消息中间件间的通信机制。同…

【云原生|Kubernetes】14-DaemonSet资源控制器详解

【云原生|Kubernetes】14-DaemonSet资源控制器详解 文章目录 【云原生|Kubernetes】14-DaemonSet资源控制器详解简介典型用法DaemonSet语法规则Pod模板Pod 选择算符在选定的节点上运行 Pod DaemonSet的 Pods 是如何被调度的污点和容忍度DaemonSet更新和回滚DaemonSet更新策略执…

MySQL登录成功后密码修改

场景 最近想通过CLI登录一台远古MySQL&#xff0c;结果遇到CLI密码不对&#xff0c;但是&#xff0c;GUI程序之前自动记住密码能够正常登录使用。 思路 通过GUI方式登录&#xff0c;修改密码后&#xff0c;再让新密码生效后&#xff0c;重新使用CLI方式登录MySQL 解决 通过…

Vue2-简介、模板语法、数据绑定、MVVM、数据代理、事件处理

&#x1f954;&#xff1a;成功之后就能光明正大地回望所有苦难 VUE-Day1 Vue简介1、Vue是什么&#xff1f;2、谁开发的&#xff1f; 发展历程&#xff1f;3、Vue的特点4、容器和实例、实例中的el和data总结 Vue模板语法插值语法指令语法 数据绑定1.单向数据绑定&#xff08;v-…

51单片机学习--DS18B20温度读取温度报警器

需要先编写OneWire模块&#xff0c;再在DS18B20模块中调用OneWire模块的函数 先根据原理图做好端口的声明&#xff1a; sbit OneWire_DQ P3^7;接下来像之前一样把时序结构用代码模拟出来&#xff1a; unsigned char OneWire_Init(void) {unsigned char i;unsigned char Ac…

opencv基础49-图像轮廓02-矩特征cv2.moments()->(形状分析、物体检测、图像识别、匹配)

矩特征&#xff08;Moments Features&#xff09;是用于图像分析和模式识别的一种特征表示方法&#xff0c;用来描述图像的形状、几何特征和统计信息。矩特征可以用于识别图像中的对象、检测形状以及进行图像分类等任务。 矩特征通过计算图像像素的高阶矩来提取特征。这些矩可以…

Towards Open World Object Detection【论文解析】

Towards Open World Object Detection 摘要1 介绍2 相关研究3 开放世界目标检测4 ORE:开放世界目标检测器4.1 对比聚类4.2 RPN自动标注未知类别4.3 基于能量的未知标识4.4 减少遗忘 5 实验5.1开放世界评估协议5.2 实现细节5.3 开放世界目标检测结果5.4 增量目标检测结果 6 讨论…

javaweb监听器和juery技术

监听servlet创建 package com.hspedu.listener;import javax.servlet.ServletContext; import javax.servlet.ServletContextEvent; import javax.servlet.ServletContextListener;/*** 老韩解读* 1. 当一个类实现了 ServletContextListener* 2. 该类就是一个监听器* 3. 该类可…

VoxWeekly|The Sandbox 生态周报|20230807

欢迎来到由 The Sandbox 发布的《VoxWeekly》。我们会在每周发布&#xff0c;对上一周 The Sandbox 生态系统所发生的事情进行总结。 如果你喜欢我们内容&#xff0c;欢迎与朋友和家人分享。请订阅我们的 Medium 、关注我们的 Twitter&#xff0c;并加入 Discord 社区&#xf…

OpenCV和PIL图像对象转换

OpenCV和PIL&#xff08;Python Imaging Library&#xff09;都是常用的Python图像处理库。它们都有自己的图像对象类型&#xff0c;因此在使用它们时需要进行相应的转换。 下面是OpenCV图像对象和PIL图像对象之间的转换方法&#xff1a; 将OpenCV图像对象转换为PIL图像对象&…

npm发包中一些操作备忘

1、npm发布相关命令 发布 npm publish 发布beta版 npm publish --tag beta 取消发布 npm unpublish --force 2、lerna发布相关命令 发布 lerna publish 其他的的官方文档里面比较全 lerna中文文档

【Vue3】keep-alive 缓存组件

当在 Vue.js 中使用 <keep-alive> 组件时&#xff0c;它将会缓存动态组件&#xff0c;而不是每次渲染都销毁和重新创建它们。这对于需要在组件间快速切换并且保持组件状态的情况非常有用。 <keep-alive> 只能包含&#xff08;或者说只能渲染&#xff09;一个子组件…

CANoe通过Frame Histogram窗口统计报文周期(方便快捷)

文章目录 效果展示1.插入Frame Histogram窗口2.Activate3.运行CANoe&#xff0c;停止后查看write窗口 效果展示 统计报文周期信息输出在write窗口。 1.插入Frame Histogram窗口 2.Activate 3.运行CANoe&#xff0c;停止后查看write窗口 统计报文周期信息输出在write窗口。

安卓开发上位机基于Qt qwidget第一次一些事

话说为什么要用Qt搞安卓&#xff0c;那肯定是因为熟悉Qt啊&#xff0c;总不能能在学java那一套东西吧&#xff0c;我相信Qt搞出来的性能上会好很多…… 目录 1、是开发环境搭建 2、关文件读写权限问题 3、关于调试 4、AP热点模式IP地址不是固定的 5、比较顺利的点 1…

04-2_Qt 5.9 C++开发指南_SpinBox使用

文章目录 1. SpinBox简介2. SpinBox使用2.1 可视化UI设计2.2 widget.h2.3 widget.cpp 1. SpinBox简介 QSpinBox 用于整数的显示和输入&#xff0c;一般显示十进制数&#xff0c;也可以显示二进制、十六进制的数&#xff0c;而且可以在显示框中增加前缀或后缀。 QDoubleSpinBox…