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)
blank

相关推荐

  • git fetch 和git pull 的差别

    git fetch 和git pull 的差别

  • 苹果套路直播计算机隐藏版,套路计算器app,套路计算器隐藏官网版app预约 v1.0 – 浏览器家园…

    苹果套路直播计算机隐藏版,套路计算器app,套路计算器隐藏官网版app预约 v1.0 – 浏览器家园…套路计算器隐藏官网版app软件是一款最新人气计算器玩法,大家可以在这里发现非常多有趣的玩法,超级适合大家进行整蛊以及活跃气氛适应的,计算器里面会有各种好玩有趣的公式,帮你计算出各种想要的问题回答,非常类似于星座方面的玩法,说不定可以帮你解决你心中的各种问题疑问,如果你想尝试的话,就赶紧下载体验吧。套路计算器隐藏官网版app软件特色:1、玩法非常简单,输入自己的想要提的问题,就可以自动算出结果!2、…

  • 最小二乘法推导以及理解[通俗易懂]

    最小二乘法推导以及理解[通俗易懂]我在网上发现了两种推导方式,于是自己跟着推导了一遍。。。。。(一)(高数式推导): [参考博客](https://blog.csdn.net/MarsJohn/article/details/54911788) 这里先引入两个提前推得出的结论: ![两个结论](https://img-blog.csdnimg.cn/20190907195440348.jpg?x-oss-proce…

  • 阿里云服务器怎么更换系统盘

    阿里云服务器怎么更换系统盘

  • csgo开箱网站可以取回的_csgo官方开箱网站在哪里

    csgo开箱网站可以取回的_csgo官方开箱网站在哪里Incsgo,能取回的开箱网.我们为Incsgo爱好者们倾力打造品质卓越的Incsgo开箱平台,Incsgo抽奖网站,安全可靠,玩法多样。立即注册领取奖金,库存充足,全新箱子,一秒取回。Incsgo官方网站-能够取回的csgo开箱子网站官方链接:www.incsgo.gg注册登录自动免费获得$1.00美金优惠码:csgogo(充值使用csgogo可增加5%充值金额)支付:微信支付宝状态:直接取回…

  • savefiledialog用法_vba filedialog

    savefiledialog用法_vba filedialog保存文件的控件有两种方式,一种就是保存,二就是另存为,保存很简单,就是在文件已经打开的情况下,在把文件写一遍在使用savefiledialog控件时,用户可以通过vs2015的属性面板设置,也可在代码中设置privatevoidbutton1_Click(objectsender,EventArgse){saveFile…

发表回复

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

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