ToastView

Last Updated on : 2024-06-05 03:14:34download

Overview

ToastView is used to notify the user without interrupting the current operation.

Code demo

Note: for more information, see Demo.

Basic ToastView

import React from "react"; import { View, TouchableOpacity } from "react-native"; import { Toast } from "tuya-panel-kit"; export default class DatePickerDemo extends React.PureComponent { constructor(props) { super(props); this.state = { show: false, }; } render() { return ( <View style={styles.wrApper}> <View style={{ flex: 1, justifyContent: "center" }}> <Toast show={this.state.show} text="I'm Iron Man! ! !" onFinish={() => this.setState({ show: false })} /> <TouchableOpacity style={styles.wrApperStyle} onPress={() => this.setState({ show: true })} > <Text style={{ textAlign: "center" }}>Click Me! </Text> </TouchableOpacity> </View> </View> ); } }

ToastView - Success

Note: this component is added in the @2.0.0-rc.2 version.

import React from "react"; import { TouchableOpacity, View, StyleSheet } from "react-native"; import { Toast, TYText } from "tuya-panel-kit"; class ToastSuccessScene extends React.PureComponent { constructor(props) { super(props); this.state = { show: false, }; } render() { return ( <View style={{ flex: 1, justifyContent: "flex-start" }}> <Toast.Success show={this.state.show} onFinish={() => this.setState({ show: false })} /> <TouchableOpacity style={styles.wrapperStyle} onPress={() => this.setState({ show: true })} > <TYText style={{ textAlign: "center" }}>Click Me! </TYText> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ wrapperStyle: { height: 44, backgroundColor: "red", justifyContent: "center", marginTop: 88, }, }); export default ToastSuccessScene;

Interaction demo

ToastView - Error

Note: this component is added in the @2.0.0-rc.2 version.

import React from "react"; import { TouchableOpacity, View, StyleSheet } from "react-native"; import { Toast, TYText } from "tuya-panel-kit"; class ToastErrorScene extends React.PureComponent { constructor(props) { super(props); this.state = { show: false, }; } render() { return ( <View style={{ flex: 1, justifyContent: "flex-start" }}> <Toast.Error show={this.state.show} onFinish={() => this.setState({ show: false })} /> <TouchableOpacity style={styles.wrapperStyle} onPress={() => this.setState({ show: true })} > <TYText style={{ textAlign: "center" }}>Click Me! </TYText> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ wrapperStyle: { height: 44, backgroundColor: "red", justifyContent: "center", marginTop: 88, }, }); export default ToastErrorScene;

ToastView - Warning

Note: this component is added in the @2.0.0-rc.2 version.

import React from "react"; import { TouchableOpacity, View, StyleSheet } from "react-native"; import { Toast, TYText } from "tuya-panel-kit"; class ToastWarningScene extends React.PureComponent { constructor(props) { super(props); this.state = { show: false, }; } render() { return ( <View style={{ flex: 1, justifyContent: "flex-start" }}> <Toast.Warning show={this.state.show} onFinish={() => this.setState({ show: false })} /> <TouchableOpacity style={styles.wrapperStyle} onPress={() => this.setState({ show: true })} > <TYText style={{ textAlign: "center" }}>Click Me! </TYText> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ wrapperStyle: { height: 44, backgroundColor: "red", justifyContent: "center", marginTop: 88, }, }); export default ToastWarningScene;

ToastView - Loading

Note: this component is added in the @2.0.0-rc.2 version.

import React from "react"; import { TouchableOpacity, View, StyleSheet } from "react-native"; import { Toast, TYText } from "tuya-panel-kit"; class ToastLoadingScene extends React.PureComponent { constructor(props) { super(props); this.state = { show: false, }; } render() { return ( <View style={{ flex: 1, justifyContent: "flex-start" }}> <Toast.Loading show={this.state.show} onFinish={() => this.setState({ show: false })} /> <TouchableOpacity style={styles.wrapperStyle} onPress={() => this.setState({ show: true })} > <TYText style={{ textAlign: "center" }}>Click Me! </TYText> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ wrapperStyle: { height: 44, backgroundColor: "red", justifyContent: "center", marginTop: 88, }, }); export default ToastLoadingScene;

API – basic

text

The text of the prompt.

Type Required
string No

show

Whether it is visible or not.

Type Required
bool Yes

onFinish

Callbacks that are about to disappear.

Type Required
() => void Yes

showPosition

The display position of the prompt:

  • top: the prompt is displayed at the top.
  • bottom: the prompt is displayed at the bottom.
  • center: the prompt is displayed in the center.
Type Required Default value
enum: top, bottom, center No bottom

style

The style of the prompt.

Type Required Default value
ViewPropTypes.style No null

contentStyle

The style of the prompt content.

Type Required Default value
ViewPropTypes.style No null

textStyle

The style of the prompt text.

Type Required Default value
Text.propTypes.style No null

image

The image of the prompt.

Type Required Default value
number No null

imageStyle

The style of the prompt image.

Type Required Default value
Image.propTypes.style No null

children

The content of the custom prompt.

Type Required Default value
any No null

API - Success, Error, and Warning

contentStyle

The style of the prompt content.

Type Required Default value
ViewPropTypes.style No null

showPosition

The display position of the prompt:

  • top: the prompt is displayed at the top.
  • bottom: the prompt is displayed at the bottom.
  • center: the prompt is displayed in the center.
Type Required Default value
enum: top, bottom, center No bottom

color

The color of the prompt image.

Type Required Default value
string No #fff

text

The text of the prompt.

Type Required Default value
string No The text of success.

size

The size of the image.

Type Required Default value
number No cx(40)

d

The path of the image.

Type Required Default value
string No iconfont.correct

iconfontStyle

The style of the prompt image.

Type Required Default value
Image.propTypes.style No { width: cx(120), height: cx(120), backgroundColor: 'rgba(0,0,0,.7)', borderRadius: cx(8), }

API – Loading

contentStyle

The style of the prompt content.

Type Required Default value
ViewPropTypes.style No null

showPosition

The display position of the prompt:

  • top: the prompt is displayed at the top.
  • bottom: the prompt is displayed at the bottom.
  • center: the prompt is displayed in the center.
Type Required Default value
enum: top, bottom, center No bottom

size

The size of the prompt image.

Type Required Default value
number No cx(40)

color

The color of the image.

Type Required Default value
string No #fff

loading

Whether the image rotates during loading.

Type Required Default value
boolean No true

strokeWidth

The stroke width of the image.

Type Required Default value
number No 4

loadingStyle

The style of the loading image.

Type Required Default value
ViewPropTypes.style No null

loadingBackgroundColor

The background color of the loading page.

Type Required Default value
ColorPropType No rgba(255,255,255,.1)