RN开源UI组件之react-native-button 使用详解

react-native-button github上一个开源的button组件,目前仍保持比较快的更新频率。使用起来很棒~感谢作者的贡献~

使用一:通过

npm install react-native-button --save

指令从npm中安装react-native-button组件。在使用的使用使用import语句引入即可。

以下来自官网的使用例子:

import React, { Component } from 'react';
import Button from 'react-native-button';

export default class ExampleComponent extends Component {
  constructor(props, context) {
    super(props, context);
  }
  _handlePress() {
    console.log('Pressed!');
  }
  render() {
    return (
      <Button
        style={{fontSize: 20, color: 'green'}}
        styleDisabled={{color: 'red'}}
        onPress={() => this._handlePress()}>
        Press Me!
      </Button>
    );
  }
};

The React packager will include the Button component in your app's JS package and make it available for your app to use.

Container Style

You can make a button with rounded corners like this:

  <Button
    containerStyle={{padding:10, height:45, overflow:'hidden', borderRadius:4, backgroundColor: 'white'}}
    style={{fontSize: 20, color: 'green'}}>
    Press me!
  </Button>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值