react-native--万能Button封装

最新推荐文章于 2024-07-19 17:18:15 发布

time_iter

最新推荐文章于 2024-07-19 17:18:15 发布

阅读量2.9k

点赞数

分类专栏： android提升 React-Native React-Native--ES6 ES6 文章标签：需求字体

本文链接：https://blog.csdn.net/tiem_erhu/article/details/53510695

版权

本文介绍如何在React Native中封装一个通用的Button组件，满足常见需求，如背景色切换、文字大小与颜色设置、边框圆角及颜色定制等。通过props传递属性，实现组件的灵活性和可配置性。

摘要由CSDN通过智能技术生成

导语：在日常开发中，我们经常需要用过按钮，比如：提交，确认，登录。
其中，大部分的按钮都有如下需求：
1-：点击与不可点击时背景颜色
2-：文案大小，字体颜色
3-：圆角，边框颜色

一：案例：
-1:props传递文案
-2:props传递是否可点击
-3:默认提供样式，样式可修改

import React, {
    Component
} from 'react'

import {
    StyleSheet,
    View,
    Text,
    TouchableOpacity,
} from 'react-native'

export default class ConfirmButton extends Component {
   
    //使用时：enable是必须存在的
    static propTypes = {
        enable: React.PropTypes.bool.isRequired,
    };

    render() {
        return (
            <View>
                {
  this._renderButton()}
            </View>
        );
    }

    _renderButton() {