Tips

Last Updated on : 2023-10-12 08:00:23download

Overview

Tips is a bubble pop-up component.

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

Code demo

Note: for more information, see Demo.

Basic use

import React, { PureComponent } from "react"; import { View, StyleSheet } from "react-native"; import { Tips, Button, Utils, TYText } from "tuya-panel-kit"; const { winWidth, convertX: cx } = Utils.RatioUtils; class TipsView extends PureComponent { constructor(props) { super(props); this.state = { show: false, }; } render() { return ( <View style={{ flex: 1, backgroundColor: "#EAEAEA", }} > <Button style={styles.button} text="Tips bubble component" textStyle={styles.text} onPress={() => this.setState({ show: ! this.state.show })} /> <View style={styles.center}> <Tips show={this.state.show} cornerPosition="topLeft" contentStyle={styles.bigTips} /> <Tips show={this.state.show} cornerPosition="topCenter" contentStyle={styles.bigTips} bgColor="#0ff" tipStyle={{ marginHorizontal: cx(16) }} /> <Tips show={this.state.show} cornerPosition="topRight" contentStyle={styles.bigTips} /> </View> <View style={[styles.center, { marginTop: cx(30) }]}> <Tips show={this.state.show} cornerPosition="bottomLeft" contentStyle={styles.bigTips} /> <Tips show={this.state.show} cornerPosition="bottomCenter" bgColor="#0ff" contentStyle={styles.bigTips} tipStyle={{ marginHorizontal: cx(16) }} /> <Tips show={this.state.show} cornerPosition="bottomRight" contentStyle={styles.bigTips} /> </View> </View> ); } } const styles = StyleSheet.create({ button: { marginTop: 12, width: winWidth, height: 44, backgroundColor: "#666", }, bigTips: { width: cx(105), height: cx(66), borderRadius: cx(8), }, text: { color: "#fff", }, center: { flexDirection: "row", alignItems: "center", justifyContent: "center", }, }); export default TipsView;

API

contentStyle

Bubble style.

Type Required Default value
ViewPropTypes.style No null

tipStyle

Bubble position.

Type Required Default value
ViewPropTypes.style No null

bgColor

Background color of the bubble.

Type Required Default value
ColorPropType No #fff

show

Whether to show the bubble.

Type Required Default value
boolean No false

showCorner

Whether to show the corner.

Type Required Default value
boolean No true

cornerPosition

Corner position.

Type Required Default value
‘topLeft’ │ ‘topCenter’ │ ‘topRight’ │ ‘bottomLeft’ │ ‘bottomCenter’ │ ‘bottomRight’ No topCenter

motionType

Animation type of the bubble.

Type Required Default value
string No ScaleFadeIn

children

The nested child element.

Type Required Default value
any No null