0.0.4 • Published 7 years ago

react-native-buttons v0.0.4

Weekly downloads
402
License
MIT
Repository
github
Last release
7 years ago

###The React-Native-Buttons

react native button based on pure JavaScript with good expansibility.

Main

  • This component provide 5 theme color for user to chose.
  • This component provide 2 type of button for user to chose.
  • This component provide the function that user can define their own theme color, we can help them to calculate the disabled color, active color and so on. Also they can define the disabled color and active color by themselves if they like.
  • This component provide the ripple effect of the button. And due to lower Android API which do not have this effect, we use highlight as alternative in the consideration of performance.
  • This component provide you add as more other components as you can into the button(eg: icon).

Example

  • API >= 21

image

  • API < 21

image

How to install

npm install react-native-buttons --save

Properties

PropDefaultTypeDescription
type'surface'stringSpecify the type of the button, you can chose form 'surface' and 'ghost'
size'default'stringSpecify the size of the button, you can chose from 'small', 'default', 'large'
theme'default'string | color typeSpecify the theme color, you can chose from 'orange', 'blue', 'red', 'gray', 'default'. Or you can define your own color by use the colort type(eg: 'gba(221,106,167,0.8)', '#BA55D3' and so on)
isLoadingfalseboolSpecify the button is on loading status. In this status, the button is disabled
loadingTitle'Loading'stringSpecify the text of loading status.
loadingColor-color typeSpecify the loading color, if you do not specify this color, we can calculate it for you based on the theme color
selfStyle-style typeSpecify button's style by yourself
disableColor-color typeSpecify the disabled color, if you do not specify this color, we can calculate it for you based on the theme color
activefalseboolSpecify the active status of the button
disabledfalseboolSpecify the disable status of the button
activeColor-color typeSpecify the active color, if you do not specify this color, we can calculate it for you based on the theme color

Method

see the react native document of TouchableWithoutFeedback. All methods supported by TouchableWithoutFeedback can be used here.

Usage

  • you can see and run the example in the app/index.js.
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import {Button} from 'react-native-buttons';

class button extends Component {
  _onPressButton () {
    console.log('onpress');
  }
  render() {
    return (
      <View style={{marginLeft: 20, marginTop: 20}}>
          <Button
            type="surface"
            size="small"
            theme="orange"
            loadingTitle="正在加载"
            isLoading={true}
            onPress={this._onPressButton}>Small</Button>
          <Button
            selfStyle={{marginLeft: 120}}
            type="ghost"
            size="small"
            theme="blue"
            isLoading={true}
            onPress={this._onPressButton}>Default</Button>
      </View>
      );
  }
}

export default button;