ReactNative——仿微信toast提示

最新推荐文章于 2024-05-31 14:20:08 发布
最新推荐文章于 2024-05-31 14:20:08 发布
阅读量2.7k 收藏
点赞数
分类专栏： ReactNative ReactNative UI 文章标签： Toast react-native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TaooLee/article/details/78319116
版权

首先看一下微信的带图片的toast 是什么样子的：
这里写图片描述
没错就是这个样子，不得不说微信的提示窗口还是比较设计的实用+美观的。一个方形带图片和文字的提示窗；

实现之前需要考虑的内容：

1提示组件必须是全局的任何地方都可以调用；
2样式如何实现；

首先看一个开源库react-native-root-siblings

这个库解决了我们要考虑的第一个问题。它可以给root组件添加兄弟组件。这就实现在app 显示之上。

至于样式实现可以通过Modal

代码也很简单
先看一下抽取的组件目录结构
这里写图片描述

最低0.47元/天 解锁文章
TaoLee-
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React Native Toast 提示消息，使用rn-overlay
我是码农
11-22 3716
在手机App开发中，用 Toast 做提示消息是比较常见的。 具体到 React Native 中，官方文档中只提供了 Android 版的 Toast : https://reactnative.dev/docs/toastandroid，而没有提供 iOS 版的。这显然是不够的，因为很少有项目只开发 Android 版，而不开发 iOS 版。 开源社区中有很多热情的开发者所提供的版本，大概看了几个，实现方式都是调用系统原生的模块实现的。那么，这么一个小小的纯UI层的东东，有必要去调用原生的模块吗？ 当然
react-native-toast-message：动画的Toast消息组件，可以强制调用
02-05
React本机烤面包消息 React Native的动画Toast消息组件。 命令式API 键盘感知 灵活的配置 安装 yarn add react-native-toast-message 用法 在应用程序入口文件中渲染Toast组件（以及在那里可能呈现的所有内容），并为其设置引用。 // App.jsx import Toast from 'react-native-toast-message' ; function App ( props ) { return ( < > { /* ... */ } < Toast ref = { ( ref
20.React Native常用功能系列一-toast通知使用和封装；
Tiger的专栏
06-12 1998
目录 1.react-native-easy-toast组件介绍 2.react-native-easy-toast组件的具体使用 2.1在App.js中封装toast组件 3.toast完整代码 在移动端常用的通知消息采用采用toast通知的方式； 1.react-native-easy-toast组件介绍 官网地址：https://www.npmjs.com/package/re...
软件测试职业生涯需要编写的全套文档模板，收藏这一篇就够了(附文档模板及视频)~
最新发布
qq_48811377的博客
05-31 1079
对测试全过程的测试范围、组织、资源、原则等进行规定和约束，并制定测试全过程各个阶段的任务分配以及时间进度安排，并提出对各项任务的评估，风险分析和管理需求。它描述需要测试的特性、测试的方法、测试环境的规划、测试工具的设计及选择、测试用例的设计方法、测试代码的设计方案等。做好测试执行进度监控，其次在测试过程中获取和分析当前的测试状态和信息，并不断跟踪和修正应对活动的有效性。作用：TPI 模型用于支持测试过程的改进，包括一系列的关键域、生命周期、组织、基础设施、工具及技术，并可用于了解组织内测试过程的成熟度。
移动端常用alert、confirm、toast等弹窗插件，兼容 jQuery/Zepto
weixin_34199405的博客
11-13 1075
移动端弹窗插件第二版，包括常见的 alert、confirm、toast、notice 四种类型弹窗，支持 jQuery 和 Zepto 库。 特性 支持常见的 alert、confirm、toast、notice 四种类型弹窗 可选择使用 IOS 或者 Material Design 风格的弹窗 可自定义按钮的文字、样式、回调函数，支...
react-native 插件汇总
weixin_43526443的博客
10-30 1586
部分自己搜集 部分 来自别的网站 第三方路由插件 react-native-router-flux react-native-scrollable-tab-view 选项卡 测滑动菜单 react-native-ezsidemenu react-native-side-menu react-native-table-component talbe插件 基于react-navigation组件的...
推荐：react-native-toast-message — 动画吐司通知组件
gitblog_00037的博客
05-14 466
推荐：react-native-toast-message — 动画吐司通知组件 项目地址:https://gitcode.com/calintamas/react-native-toast-message 在React Native应用开发中，向用户反馈信息是至关重要的，而react-native-toast-message就是这样一个能帮你实现优雅提示的开源库。它是一个轻量级、易于定制且动画化...
ReactNative实现Toast的示例
08-28
在React Native开发中，有时我们需要向用户展示一些短暂的通知信息，而这种情况下，Toast组件就是一个非常实用的工具。在原生Android开发中，Toast可以轻松地显示一条消息并自动消失，但在React Native中，由于平台...
React实现全局组件的Toast轻提示效果
10-17
React 实现全局组件的 Toast 轻提示效果是构建用户界面时常见的需求，尤其是在需要向用户提供即时反馈的情况下。本文将详细介绍如何在 React 应用中创建一个可全局调用的 Toast 组件，以及如何实现其不同类型的提示...
React Native开发封装Toast与加载Loading组件示例
10-18
主要介绍了React Native开发封装Toast与加载Loading组件，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react-native中的toast提示框
AnitaSun的博客
03-28 1285
Toast 在common文件夹下新建Toast文件夹，把这里面的两个文件放进去（Toast） Toast.js// Toast.js 'use strict'; import React, { Component } from 'react'; import { View } from 'react-native'; import Overlay from '../Overlay/Overlay'; import ToastView from './ToastView'; export defa
RN无需依赖的Toast
weixin_45952652的博客
02-02 638
因为RN里的toast只支持安卓，ios不提供出api导致我不得不找第三方库，但市场上toast各式各样有些报警告或者运行不了的，我预期浪费精力找还不如自己封装一个还节省时间 import React, {PureComponent} from 'react'; import { ActivityIndicator, StyleSheet, Text, View, Animated, StyleProp, ViewStyle, TouchableOpacity, Gest
React实现Toast（提示）效果
weixin_34233856的博客
06-20 1118
效果图 需求 项目中需要实现app中常见的提示效果Toast。这个效果看似简单，实现起来没有那么容易。首先Toast的使用方法必须十分简单，简单到一行代码搞定： Toast.info('普通的Toast我普通的摇！！', 3000); 随时用随时调用上述方法即可。再有一点，Toast不用插入到页面中，他不会向其他组件一样一直出现在DOM...
react-native-easy-toast, 一款简单易用的 Toast 组件，支持 Android&iOS.
weixin_33875564的博客
05-31 119
2019独角兽企业重金招聘Python工程师标准>>> ...
React 模拟实现全局Toast提示
weixin_42333548的博客
05-09 1074
用react模拟一个toast提示框，提示的位置可挂载到指定的dom，不指定dom的话默认会挂载到body上,具体逻辑自行调整即可 效果如下： 实现逻辑，index.tsx import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle, Ref } from 'react'; import styles from './index.less'; import ReactDOM from 're...
react native toast
04-03
React Native Toast is a library that provides a simple way to show toast messages in a React Native application. A toast message is a small notification that appears on the screen to provide feedback ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值