React Native 自定义圆角button的封装

React Native自定义圆角按钮

最新推荐文章于 2025-06-03 09:01:35 发布

原创最新推荐文章于 2025-06-03 09:01:35 发布 · 1.7w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#RN

rn 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在React Native中创建自定义圆角按钮组件。通过定义样式、属性类型和默认属性，实现了一个可复用且易于定制的按钮组件。

前段时间一直在做react native开发，一直在忙，也没时间写东西，这次就打算认真地写点东西了。
感觉react native开发就是要先写组件（component），然后用组件去组装页面。组件写好了，后续开发就简单多了。不多说了，下面介绍下自定义圆角Button的封装。

'use strict';

import React, {
   Component,
   PropTypes,
  } from 'react';

import {
  StyleSheet,
  PixelRatio,
  Text,
  View,
  TouchableHighlight,
  Platform,
} from 'react-native';

class RadiusBtn extends Component {

  static propTypes = {
    btnName: PropTypes.string,
    textStyle: Text.propTypes.style,
    btnStyle: TouchableHighlight.propTypes.style,
    underlayColor:       TouchableHighlight.propTypes.underlayColor,
  };

  static defaultProps = {
    btnName: 'Button',
    underlayColor: '#4169e1',
  };


  render() {
    return (
      <View style = {{
                    flexDirection: 'row',
                    justifyContent: 'center',
                    alignItems: 'center',}}>
          <TouchableHighlight
              underlayColor={this.props.underlayColor}
              activeOpacity={0.5}
              style={[styles.center, styles.btnDefaultStyle, this.props.btnStyle]}
              onPress={this.props.onPress}>
              <Text style={[styles.textDefaultStyle, this.props.textStyle]}>{this.props.btnName}</Text>
          </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  center: {
    justifyContent:'center',
    alignItems: 'center',
  },
  btnDefaultStyle: {
    width: 100,
    height: 20,
    backgroundColor: '#ff8447',
    borderColor: '#ff8447',
    borderRadius: 15,
    borderWidth: (Platform.OS==='ios' ? 1.0 : 1.5) / PixelRatio.get(),
  },
  textDefaultStyle: {
    fontSize: 16,
    color: '#ffffff',
  },
});

module.exports = RadiusBtn;

static propTypes = { }; 这个方法是对定义的属性的类型设置并检验传入的类型。

static defaultProps = {} ；这个是设置一些组件的默认属性。

其他没什么说的了，比较简单，用法如下：

<RadiusButton
                btnName= 'btnName'
                textStyle= {{
                            fontSize: 16,
                            color: '#ffffff',
                          }}
                btnStyle= {{
                            width: 300,
                            height: 44,
                            borderRadius: 25,
                          }}
                underlayColor= '#4169e1'
                onPress={this._pressCreditClick} >
              </RadiusButton>