大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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',
},
});
示例图
项目GitHub地址:https://github.com/zhouwei1994/nativeCase.git
注意:未经允许不可私自转载,违者必究
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/189718.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...