React Native技术篇—自定义Toast弹窗「建议收藏」

React Native技术篇—自定义Toast弹窗「建议收藏」注意:未经允许不可私自转载,违者必究ReactNative官方文档:https://reactnative.cn/docs/getting-started/项目GitHub地址:https://github.com/zhouwei1994/nativeCase.git在写自定义Toast弹窗之前我们要先创建一个ReactNative第二视图层。创建教程:https://b…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

注意:未经允许不可私自转载,违者必究

React Native官方文档:https://reactnative.cn/docs/getting-started/

项目GitHub地址:https://github.com/zhouwei1994/nativeCase.git

在写自定义Toast弹窗之前我们要先创建一个React Native第二视图层。

创建教程:https://blog.csdn.net/weixin_40614372/article/details/86506678

自定义Toast弹窗代码

在项目src/components/common目录下创建 Toast.js

import React, {
    Component,
} from 'react';

import {
    StyleSheet,
    View,
    Easing,
    Dimensions,
    Text,
    Animated
} from 'react-native';
const { width, height } = Dimensions.get('window')
class AddToast extends Component {
    constructor(props) {
        super(props);
        this.state = {
            fadeAnim: new Animated.Value(0)
        }
    }
    componentDidMount() {
        Animated.sequence([
            // 使用宽松函数让数值随时间动起来。
            Animated.timing(                  // 随时间变化而执行动画
                this.state.fadeAnim,            // 动画中的变量值
                {
                    toValue: 1,                   // 透明度最终变为1,即完全不透明
                    duration: 500,              // 让动画持续一段时间
                }
            ),
            Animated.delay(4000),
            Animated.timing(
                this.state.fadeAnim,
                {
                    toValue: 0,
                    duration: 500,
                }
            )
        ]).start((res) => {
            this.props.delete && this.props.delete(res);
        });
    }
    render() {
        let { fadeAnim } = this.state;
        const opacity = fadeAnim.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 1]
        });
        const translateY = fadeAnim.interpolate({
            inputRange: [0, 1],
            outputRange: [20, 0]
        });
        return (
            <Animated.Text                 // 使用专门的可动画化的Text组件
                style={
  
  {
                    opacity: opacity,         // 将透明度指定为动画变量值
                    backgroundColor: "rgba(0,0,0,0.7)",
                    borderRadius: 10,
                    color: "#FFF",
                    marginTop: 5,
                    paddingBottom: 5,
                    paddingLeft: 15,
                    paddingTop: 5,
                    paddingRight: 15,
                    transform: [
                        { translateY: translateY },
                    ]
                }}
            >
                {this.props.children}
            </Animated.Text>
        )
    }
}
let _this;
let key = 0;
class ToastView extends Component {
    constructor(props) {
        super(props);
        _this = this;
        this.state = {
            toastList: []
        }
        this.deleteToast = this.deleteToast.bind(this);
    }
    static add = (value) => {
        var toastList = _this.state.toastList;
        var toastAddState = true;
        toastList.forEach((item, index) => {
            if (item.text === value) {
                toastAddState = false;
            }
        });
        if (toastAddState) {
            toastList.push({
                text: value,
                value: <AddToast key={key} delete={_this.deleteToast}>{value}</AddToast>
            });
            key++;
            _this.setState({ toastList: toastList })
        }
    };
    deleteToast() {
        var toastList = this.state.toastList;
        toastList.splice(0, 1);
        this.setState({ toastList: toastList })
    }
    render() {
        return (
            <View style={
  
  {
                position: "absolute",
                left: 0,
                bottom: 50,
                width: width,
                justifyContent: "center",
                alignItems: "center",
            }}>
                {this.state.toastList.map((item, index) => {
                    return item.value;
                })}
            </View>
        )
    }
}
export default ToastView;

使用方法

import React, { Component } from 'react';
import { ScrollView, StyleSheet, Text, View, Button } from 'react-native';
import Toast from '../../components/common/Toast';
var s = 0;
class ToastPage extends Component {
    static navigationOptions = {
        title: '提示',
    };
    constructor(props) {
        super(props);
    }
    open() {
        s++;
        Toast.add("测试,我是Toast 顺序:"+s);
    }
    render() {
        return (
            <ScrollView style={styles.pageStyle}>
                <Text style={
  
  { fontSize: 30 }}>Date</Text>
                <Button title="打开提示" onPress={this.open.bind(this)} />
            </ScrollView>
        );
    }
}
export default ToastPage;
const styles = StyleSheet.create({
    pageStyle: {
        backgroundColor: '#f5f5f5',
    },
});

示例图

React Native技术篇—自定义Toast弹窗「建议收藏」

项目GitHub地址:https://github.com/zhouwei1994/nativeCase.git

注意:未经允许不可私自转载,违者必究

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/189718.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 谷歌提示密码外泄_你不要把手机丢了泄露

    谷歌提示密码外泄_你不要把手机丢了泄露前不久,Google正式对外推出了基于Gmail的Google Buzz,以此重新进入了微博客和社交网络服务。Google Buzz可以认为是一个类似微博客的状态更新工具,用户可以在里面分享消息、图片

    2022年10月15日
  • 实现MyBatis批量插入

    ServiceintcreateList(List<ProductDeviceEntity>roductDeviceEntityList);ServiceImpl @Override publicintcreateList(List<ProductDeviceEntity>roductDeviceEntityList){ log.info(…

  • 农行赵维平:农业银行自主可控的大数据平台建设[通俗易懂]

    农行赵维平:农业银行自主可控的大数据平台建设[通俗易懂]4月27日,中国大数据峰会上,农总行赵处的讲演,引得台下掌声雷动。“大数据建设只有起点,没有终点,我们一直在路上。在国产化的道路上,希望民族工业无比强大,在国际市场上挺起腰杆!”500-333文章照片-大数据推动金融创新-赵维平中国农业银行软件开发中心的专家赵维平农总行赵处的讲演的数据着实令国人振奋!农业银行以国产数据库GBase8a为基础的国…

  • 一篇写给程序员的提问艺术(转)

    一篇写给程序员的提问艺术(转)作为一个刚入it界的php菜鸟,我感觉自己需要学很多程序员的基本素养,学习如何学习,有效率的学习,精确地学习,热情的学习,加油,这是一篇关于提问的文章分享给大家吧,(2009年的更新:本文来自2005年的白云黄鹤BBS,未经排版,四年来,文末一直保留有英文原文出处并注明链接)这个版上太多的问题,不能让我以很愉快的心情来解答,于是,我放弃了强忍着指责别人的心情找到了这篇《提问的艺术…

  • LSTM模型理解_rfm模型应用实例

    LSTM模型理解_rfm模型应用实例LSTM模型之前一直想要了解一下LSTM模型的想法,看到一些介绍,说里面的各种门,遗忘门,输入门,输出门,是模拟电路的,然后自己就一直很莫名其妙,怎么还有电路什么的,然后就各种一直看不懂。。。现在回过头来仔细的看了看,发现原来也不是很难。不是电路,跟电路一点关系都没有,把它想象成一个神经元就好了,一切问题迎刃而解。嗯,是的,就是这么简单。。。最后在知乎上找了一篇文章,讲的挺不错的:https:…

  • navicat15.0.25激活码【2021最新】

    (navicat15.0.25激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.htmlS32PGH0SQB-eyJsaWN…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号