ReactNative实现Toast

移动开发 简书

对于Android开发工程师来说,Toast在熟悉不过了,用它来显示一个提示信息,并自动隐藏。在我们开发RN应用的时候,我门也要实现这样的效果,就一点困难了,倒也不是困难,只是需要我们去适配,RN官方提供了一个API ToastAndroid,看到这个名字应该猜出,它只能在Android中使用,在iOS中使用没有效果,所以,我们需要适配或者我们自定义一个,今天的这篇文章就是自定义一个Toast使其在Android和iOS都能运行,并有相同的运行效果。

源码传送门

定义组件

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Easing,
    Dimensions,
    Text,
    Animated
} from 'react-native';
import PropTypes from 'prop-types';
import Toast from "./index";

const {width, height} = Dimensions.get("window");
const viewHeight = 35;

class ToastView extends Component {
    static propTypes = {
        message:PropTypes.string,
    };
    dismissHandler = null;

    constructor(props) {
        super(props);
        this.state = {
            message: props.message !== undefined ? props.message : ''
        }
    }

    render() {
        return (
            
                {this.state.message}
            
        )
    }
    componentDidMount() {
       this.timingDismiss()
    }

    componentWillUnmount() {
        clearTimeout(this.dismissHandler)
    }


    timingDismiss = () => {
        this.dismissHandler = setTimeout(() => {
            this.onDismiss()
        }, 1000)
    };

    onDismiss = () => {
        if (this.props.onDismiss) {
            this.props.onDismiss()
        }
    }
}

const styles = StyleSheet.create({
    textContainer: {
        backgroundColor: 'rgba(0,0,0,.6)',
        borderRadius: 8,
        padding: 10,
        bottom:height/8,
        maxWidth: width / 2,
        alignSelf: "flex-end",
    },
    defaultText: {
        color: "#FFF",
        fontSize: 15,
    },
    container: {
        position: "absolute",
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        flexDirection: "row",
        justifyContent: "center",
    }
});
export default ToastView

首先导入我们必须的基础组件以及API,我们自定义组件都需要继承它,Dimensions用于实现动画,Easing用于设置动画的轨迹运行效果,PropTypes用于对属性类型进行定义。

render方法是我们定义组件渲染的入口,最外层view使用position为absolute,并设置left,right,top,bottom设置为0,使其占满屏幕,这样使用Toast显示期间不让界面监听点击事件。内层View是Toast显示的黑框容器,backgroundColor属性设置rgba形式,颜色为黑色透明度为0.6。并设置圆角以及最大宽度为屏幕宽度的一半。然后就是Text组件用于显示具体的提示信息。

我们还看到propTypes用于限定属性message的类型为string。constructor是我们组件的构造方法,有一个props参数,此参数为传递过来的一些属性。需要注意,构造方法中首先要调用super(props),否则报错,在此处,我将传递来的值设置到了state中。

对于Toast,显示一会儿自动消失,我们可以通过setTimeout实现这个效果,在componentDidMount调用此方法,此处设置时间为1000ms。然后将隐藏毁掉暴露出去。当我们使用setTimeout时还需要在组件卸载时清除定时器。组件卸载时回调的时componentWillUnmount。所以在此处清除定时器。

实现动画效果

在上面我们实现了Toast的效果,但是显示和隐藏都没有过度动画,略显生硬。那么我们加一些平移和透明度的动画,然后对componentDidMount修改实现动画效果

在组件中增加两个变量

moveAnim = new Animated.Value(height / 12);
    opacityAnim = new Animated.Value(0);

在之前内层view的样式中,设置的bottom是height/8。我们此处将view样式设置如下

style={[styles.textContainer, {bottom: this.moveAnim, opacity: this.opacityAnim}]}

然后修改componentDidMount

componentDidMount() {
        Animated.timing(
            this.moveAnim,
            {
                toValue: height / 8,
                duration: 80,
                easing: Easing.ease
            },
        ).start(this.timingDismiss);
        Animated.timing(
            this.opacityAnim,
            {
                toValue: 1,
                duration: 100,
                easing: Easing.linear
            },
        ).start();
    }

也就是bottom显示时从height/12到height/8移动,时间是80ms,透明度从0到1转变执行时间100ms。在上面我们看到有个easing属性,该属性传的是动画执行的曲线速度,可以自己实现,在Easing API中已经有多种不同的效果。大家可以自己去看看实现,源码地址是 https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/Easing.js
,自己实现的话直接给一个计算函数就可以,可以自己去看模仿。

定义显示时间

在前面我们设置Toast显示1000ms,我们对显示时间进行自定义,限定类型number,

time: PropTypes.number

在构造方法中对时间的处理

time: props.time && props.time < 1500 ? Toast.SHORT : Toast.LONG,

在此处我对时间显示处理为SHORT和LONG两种值了,当然你可以自己处理为想要的效果。

然后只需要修改timingDismiss中的时间1000,写为this.state.time就可以了。

组件更新

当组件已经存在时再次更新属性时,我们需要对此进行处理,更新state中的message和time,并清除定时器,重新定时。

componentWillReceiveProps(nextProps) {
     this.setState({
            message: nextProps.message !== undefined ? nextProps.message : '',
            time: nextProps.time && nextProps.time < 1500 ? Toast.SHORT : Toast.LONG,
        })
        clearTimeout(this.dismissHandler)
        this.timingDismiss()
    }

组件注册

为了我们的定义的组件以API的形式调用,而不是写在render方法中,所以我们定义一个跟组件

import React, {Component} from "react";
import {StyleSheet, AppRegistry, View, Text} from 'react-native';

viewRoot = null;

class RootView extends Component {
    constructor(props) {
        super(props);
        console.log("constructor:setToast")
        viewRoot = this;
        this.state = {
            view: null,
        }
    }

    render() {
        console.log("RootView");
        return (
            {this.state.view}
        )
    }

    static setView = (view) => {
//此处不能使用this.setState
        viewRoot.setState({view: view})
    };
}


const originRegister = AppRegistry.registerComponent;

AppRegistry.registerComponent = (appKey, component) => {

    return originRegister(appKey, function () {
        const OriginAppComponent = component();

        return class extends Component {

            render() {
                return (
                    
                        
                        
                    
                );
            };
        };
    });
};
const styles = StyleSheet.create({
    container: {
        flex: 1,
        position: 'relative',
    },
    rootView: {
        position: "absolute",
        left: 0,
        right: 0,
        top: 0,
        bottom: 0,
        flexDirection: "row",
        justifyContent: "center",
    }
});
export default RootView

RootView就是我们定义的根组件,实现如上,通过AppRegistry.registerComponent注册。

包装供外部调用

import React, {
    Component,
} from 'react';
import RootView from '../RootView'
import ToastView from './ToastView'


class Toast {
    static LONG = 2000;
    static SHORT = 1000;

    static show(msg) {
        RootView.setView( {
                RootView.setView()
            }}/>)
    }

    static show(msg, time) {
        RootView.setView( {
                RootView.setView()
            }}/>)
    }
}

export default Toast

Toast中定义两个static变量,表示显示的时间供外部使用。然后提供两个static方法,方法中调用RootView的setView方法将ToastView设置到根view。

使用

首先导入上面的Toast,然后通过下面方法调用

Toast.show("测试,我是Toast");
                    //能设置显示时间的Toast
                    Toast.show("测试",Toast.LONG);

好了文章介绍完毕。如果想看完整代码,可以进我 GitHub
查看。文中若有不足或错误的地方欢迎指出。最后新年快乐。

简书稿源:简书 (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 移动开发 » ReactNative实现Toast

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录