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>