react-native按钮组件Button

一时失言乱红尘 2022-05-25 13:15 253阅读 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 条评论，253人围观）

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

相关阅读

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

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

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

相关 react-native按钮组件Button

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

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

相关 AngularJS 按钮 v-button

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

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

相关 button按钮覆盖图像

有的页面的搜索框是一个class 如下图所示 ![20181109165345649.png][]![20181109165409455.png][] 但是当要对

╰半橙微兮°/ 2022年04月18日 06:27/ 0 赞/ 264 阅读

相关按钮button标签赋值

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

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

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

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

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

相关 uniapp 按钮组件button

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

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

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

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

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

相关 taro Button按钮组件

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

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

相关 HTML input button 按钮

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

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