React-naive-highly-customizable-action-sheet NPM

react-naive-highly-customizable-action-sheet

A highly customizable ActionSheet component which can be used in iOS and Android platform.

npm.io

Introduction Blog in Chinese:简书：结合一个开源的底部弹出菜单组件来讲一下如何封装一个React Native组件

default style：

npm.io

customized iOS style:

npm.io

customized other style:

npm.io

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
   mainTitle="There are three ways to contact. Please choose one to contact."
   itemTitles = {["By phone","By message","By email"]}
   selectionCallbacks = {[this.clickedByPhone,this.clickedByMessage,this.clickedByEmail]}
   mainTitleTextAlign = 'center'
   ref={(actionsheet)=>{this.actionsheet = actionsheet}}
/>
  
//show ActionSheet
showActionSheet(){
	this.actionsheet.show();  
}

//callback 1
clickedByPhone(){
   alert('By Phone');
}

//callback 2
clickedByMessage(){
    alert('By Message');
}

//callback 3
clickedByEmail(){
    alert('By Email');
}

npm.io

Example2:

 <ActionSheet
    mainTitle="There are three ways to contact. Please choose one to contact."
    itemTitles = {["By phone","By message","By email"]}
    selectionCallbacks = {[this.clickedByPhone,this.clickedByMessage,this.clickedByEmail]}
    mainTitleTextAlign = 'center'
    contentBackgroundColor = '#EFF0F1'
    bottomSpace = {10}
    cancelVerticalSpace = {10}
    borderRadius = {5}
    sideSpace = {6}
    itemTitleColor = '#006FFF'
    cancelTitleColor = '#006FFF'
    ref={(actionsheet)=>{this.actionsheet = actionsheet}}
/>

npm.io

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)