ReactNative实现Toast的示例

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 (

style={styles.defaultText}>{this.state.message}

style={styles.defaultText}>{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,

boZJIOjttom: 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(

message={msg}

onDismiss={() => {

RootView.setView()

}}/>)

}

static show(msg, time) {

RootView.setView(

message={msg}

time={time}

onDismiss={() => {

RootView.setView()

}}/>)

}

}

export default Toast

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

使用

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

Toast.show("测试,我是Toast");

//能设置显示时间的Toast

Toast.show("测试",Toast.LONG);

message={msg}

onDismiss={() => {

RootView.setView()

}}/>)

}

static show(msg, time) {

RootView.setView(

message={msg}

time={time}

onDismiss={() => {

RootView.setView()

}}/>)

}

}

export default Toast

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

使用

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

Toast.show("测试,我是Toast");

//能设置显示时间的Toast

Toast.show("测试",Toast.LONG);

message={msg}

time={time}

onDismiss={() => {

RootView.setView()

}}/>)

}

}

export default Toast

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

使用

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

Toast.show("测试,我是Toast");

//能设置显示时间的Toast

Toast.show("测试",Toast.LONG);

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。