dereksweet / react-native-buttons Goto Github PK

###The React-Native-Buttons

react native button based on pure JavaScript with good expansibility.

• 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).

• API >= 21

• API < 21

npm install react-native-buttons --save

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

• 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;