项目作者: Intuz-production

项目描述 :
React Native Button Control from INTUZ
高级语言: JavaScript
项目地址: git://github.com/Intuz-production/react-native-button.git
创建时间: 2018-02-01T09:54:16Z
项目社区:https://github.com/Intuz-production/react-native-button

开源协议:MIT License

下载


Introduction


INTUZ presents a very handy React Native component which allows you to have a ready-made Button controller with support for both icons and text. Try it your self by following below integration steps, Enjoy!



Features

  • Support of image and text both
  • Customizable style for button and text
  • Positioning image alignment with text easily
  • Customizable space between text and image
  • Manageable both state of button (selected and non-selected)



Screenshots/button.jpeg

Getting Started

Import Button in your .js file

  1. import INTButton from './app/component/INTButton'

Render your Button

  1. <INTButton
  2. buttonStyle = {{alignSelf:'flex-start', padding : 10, borderRadius:5 , borderWidth:1, borderColor:'black',height : 50,marginTop:10}}
  3. buttonStyleSelected = {{backgroundColor : 'transparent'}}
  4. title = 'Button'
  5. titleSelected = 'Favorite'
  6. icon = {require('./images/ic_heart.png')}
  7. iconSelected = {require('./images/top_heart_selected.png')}
  8. iconPosition = 'left'
  9. isSelected = {true}
  10. spaceBetweenIconAndTitle = {2}
  11. titleStyle = {{color : 'black'}}
  12. titleStyleSelected = {{color : 'black'}}
  13. onPress = {() => {console.log('Button Tapped')}}
  14. />


Properties

Available properties Type Default Value Required Description
buttonStyle Style {backgroundColor:’white’, padding : 5,justifyContent:’flex-start’,alignItems:’center’,overflow:’hidden’} No Style your button
buttonStyleSelected Style - No Style of button for selected state when isSelected is true
title String - Yes Title of button
titleSelected String - No Title of button for selected state when isSelected is true
icon Image - No Icon to display in button
iconSelected Image - No Icon to display in button for selected state when isSelected is true
iconPosition String (left, right, top, bottom) left No Set your icon position align to the title
isSelected Boolean (true/false) FALSE No Set your button state
spaceBetweenIconAndTitle Number 10 No Set the space between the icon and title
titleStyle Style {color:’blue’,fontSize : 16} No Title style what ever you want to set and it will override the default
titleStyleSelected Style - No Title style what ever you want to set and it will override the default for selected state when isSelected is true
onPress Function - No Callback function


Bugs and Feedback

For bugs, questions and discussions please use the Github Issues.


License

Copyright (c) 2018 INTUZ.



Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:



THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.