react-native按钮组件Button

一时失言乱红尘 2022-05-25 13:15 281阅读 0赞

学习交流：[https://gitee.com/potato512/Learn\_ReactNative][https_gitee.com_potato512_Learn_ReactNative]

react-native学习交流QQ群：806870562

效果图

![20180515142435644][]

代码示例

import React, {Component} from 'react';
    import {
        StyleSheet,
        View,
        Button,
        Alert
    } from 'react-native';
    
    type Props = {};
    export default class ButtonPage extends Component<Props> {
        render() {
            return(
                <View style={
       {marginTop:20,marginHorizontal:10}}>
    
                    <View style={styles.clickButtonStyle}>
                        <Button title={"点我"} color={'green'} onPress={buttonClick}/>
                    </View>
    
    
                    <Button title={"单击"} onPress={() => {
                        Alert.alert("单击按钮");
                    }} />
    
                </View>
            );
        };
    }
    
    const buttonClick = () => {
        Alert.alert("点击了按钮");
    };
    
    const styles = StyleSheet.create({
       clickButtonStyle: {
           margin: 10,
    
           height: 40,
    
           backgroundColor: '#E6E6FA',
    
           borderRadius: 10,
           borderWidth: 1,
           borderColor: '#7FFF00',
       },
    });

[https_gitee.com_potato512_Learn_ReactNative]: https://gitee.com/potato512/Learn_ReactNative
[20180515142435644]: /images/20220525/f44300b921fd4a658ee43f75ea0d5c3a.png

发表评论取消回复

表情：

评论列表（有 0 条评论，281人围观）

还没有评论，来说两句吧...

相关阅读

相关 MUI button(按钮）

mui默认按钮为灰色，另外还提供了蓝色（blue）、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的按钮，五种色系对应五种场景，分别为p

àì夳堔傛蜴生んèń/ 2023年07月19日 12:27/ 0 赞/ 23 阅读

相关 Element el-button 按钮组件详解

[点此查看全部文字教程、视频教程、源代码][Link 1] 本文目录 1. 背景 2. 按钮分类 3. 按钮样式 4. 按钮状态 5. 按

今天药忘吃喽~/ 2023年01月12日 01:48/ 0 赞/ 347 阅读

相关 react-native按钮组件Button

学习交流：[https://gitee.com/potato512/Learn\_ReactNative][https_gitee.com_potato512_Learn_Re

一时失言乱红尘/ 2022年05月25日 13:15/ 0 赞/ 282 阅读

相关 AngularJS 按钮 v-button

v-button 详细介绍 v-button 是 AngularJS 可按按钮，并有繁忙的指示器。使用示例： angular.module('myApp', [

清疚/ 2022年05月19日 09:24/ 0 赞/ 290 阅读

相关按钮button标签赋值

<input type="button" value="123" id="btn" /> <button id="btn2">123</button>

深碍√TFBOYSˉ_/ 2021年09月24日 11:26/ 0 赞/ 472 阅读

相关 uniapp——button按钮组件的使用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

痛定思痛。/ 2021年07月26日 00:39/ 0 赞/ 1887 阅读

相关 uniapp 按钮组件button

属性 type='primary/default/warn' 颜色分别为蓝色/灰白色/红色 size='mini/default' 按钮大小

左手的ㄟ右手/ 2021年07月24日 18:06/ 0 赞/ 1522 阅读

相关 rn 圆圈加载指示器组件ActivityIndicator、按钮组件Button

活动指示器 1、引入 import { ActivityIndicator} from "react-native"; 2、使用

桃扇骨/ 2021年07月24日 14:49/ 0 赞/ 547 阅读

相关 taro Button按钮组件

1、导入 import {Button} from '@tarojs/components' 2、使用 <Button>按钮名称<

末蓝、/ 2021年07月24日 11:03/ 0 赞/ 1176 阅读

相关 HTML input button 按钮

HTML input button 按钮将`<input>`标签的type属性值设置为"button"即可创建一个按钮。点击按钮可以触发一个事件，通常需要结合Java...

小灰灰/ 2020年05月16日 18:07/ 0 赞/ 1034 阅读