react-naive-highly-customizable-action-sheet
A highly customizable ActionSheet component which can be used in iOS and Android platform.
Introduction Blog in Chinese:简书:结合一个开源的底部弹出菜单组件来讲一下如何封装一个React Native组件
default style:
customized iOS style:
customized other style:
Installation
npm install react-naive-highly-customizable-action-sheet
Usage
1. Import component
import ActionSheet from 'react-naive-highly-customizable-action-sheet'
2. Custom and show
Example 1:
<ActionSheet ="There are three ways to contact. Please choose one to contact." = = = 'center' =/> //show ActionSheet{ thisactionsheet; } //callback 1{ ;} //callback 2{ ;} //callback 3{ ;}
Example2:
<ActionSheet ="There are three ways to contact. Please choose one to contact." = = = 'center' = '#EFF0F1' = = = = = '#006FFF' = '#006FFF' =/>
Props:
-
itemTitles
(Array):titles of all selection items -
selectionCallbacks
(Array):callbacks of all selection items -
mainTitle
(String):main title text -
mainTitleFont
(Number):main title text font -
mainTitleColor
(String):main title text color -
mainTitleHeight
(Number):main title cell height -
mainTitleTextAlign
(String):main title text align -
mainTitlePadding
(Number):main title padding -
itemTitleFont
(Number):item text font -
itemTitleColor
(String):item text color -
itemHeight
(Number):item cell height -
cancelTitle
(String):cancel text,default is 'Cancel' -
cancelTitleFont
(Number):cancel text font -
cancelTitleColor
(String):cancel text color -
cancelHeight
(Number):cancel cell height -
hideCancel
(Bool):if hide cancel cell (default is no) -
fontWeight
(String):all text fontWeight (default: title and item text fontWeight is 'normal', cancel text fontWeight is 'bold' ) -
titleFontWeight
(String):title text fontWeight -
itemFontWeight
(String):item text fontWeight -
cancelFontWeight
(String):cancel text fontWeight -
contentBackgroundColor
(String):all cell background color (default is white) -
titleBackgroundColor
(String):title cell background color (default is white) -
itemBackgroundColor
(String):item cell background color (default is white) -
cancelBackgroundColor
(String):cancel cell background color (default is white) -
itemSpaceColor
(String):seperate line color between item cells -
cancelSpaceColor
(String):seperate line color between last item cell and cancel cell -
itemVerticalSpace
(Number):distance between item cells -
cancelVerticalSpace
(Number):distance between last item item cell and cancel cell -
bottomSpace
(Number):distance between screen bottom and cancel cell (default is 0) -
sideSpace
(Number):distance between content edge and screen edge (default is 0) -
borderRadius
(Number):border radius of content (default is 0) -
maskOpacity
(Number):opacity of mask (default is 0.3)
Highly customizable
License
All source code is licensed under the MIT License.