Button 按钮

Button 按钮

简介

1.0 开始加入

Button按钮用于开始一个即时操作, 是最常用组件之一

何时使用

Button封装React NativeTouchable*系列的组件,有需要响应点击行为等优先考虑使用Button

代码演示

简单Button

最简单的就是和TouchableOpacity一样的用法, onPress可以监听点击事件

import { Button } from 'tuya-panel-kit';

const BasicUsage = () => (
<View>
<Text style={styles.clearText}>Basic Usage</Text>
<Button
style={[styles.format, this.state.code ? { backgroundColor: '#F5A623' } : null]}
onPress={this.tapCodeBtn}
><Text style={styles.clearText}>Tap to change background color</Text>
</Button>
</View>
)

效果:

图片和渐变背景Button

允许用户传入图片或者渐变作为背景

import { Button } from 'tuya-panel-kit';

const gradient = {
'3%': '#4facfe',
'90%': '#00f2fe',
};

const BackgroundUsage = () => (
<View>
<Text style={[styles.clearText, { marginTop: 20 }]}>LinearGradient background Button</Text>
<Button
background={gradient}
style={[styles.format2]}
><Text style={styles.clearText}>LinearGradient button</Text>
</Button>

<Text style={styles.clearText}>Image background Button</Text>
<Button
background={require('../res/button.png')}
style={[styles.format2]}
><Text style={styles.clearText}>Image button</Text>
</Button>
</View>
)

效果图:

API

ButtonProps继承自TouchableOpacityTouchableOpacity文档

style

用来控制Button外层容器的样式

类型(Type) 必传(Required)
ViewProptypes.style

contentStyle

Button内层容器的样式

类型(Type) 必传(Required)
ViewProptypes.style

background

指定Button的背景,背景可以是一张图片,或者是一个线性渐变.| 类型(Type) | 必传(Required) |

类型(Type) 必传(Required)
number or object

渐变示例:

const gradient = {
'3%': '#4facfe',
'90%': '#00f2fe',
};

backgroundStyle

Button背景的样式

类型(Type) 必传(Required)
ViewProptypes.style

电话咨询

在线咨询

400-881-8611