react-native-customizable-actionsheet
Demos
default | notitle | customize title or item | customize items |
---|---|---|---|
Code
// notitle<ActionSheet ref= thisactionsheet = ref funcs=actionSheetFuncs actions=actionSheetActions/> // customize the title <ActionSheet title=<IconElement name='call' size=15 color='red'/> ref= thisactionsheet = ref funcs=actionSheetFuncs actions=actionSheetActions/> // OR <ActionSheet title='电话' ref= thisactionsheet = ref funcs=actionSheetFuncs actions=actionSheetActions/> // customize items;;<ActionSheet title='电话' ref= thisactionsheet = ref buttonComponents=<View style=flex: 1 justifyContent: 'center' alignItems: 'center'><IconElement name='call' size=50 color='red' raised reverse/></View>/> // actionSheetFuncs: [() => Communications.phonecall(phone, true), () => Communications.text(phone), () => {Clipboard.setString(phone);this.actionsheet.hide();} ],// actionSheetActions: [<View style={{flexDirection: 'row'}}><IconElement name='call' color='blue' size={15}/><Text>{phone}</Text></View>, '发短信给' + phone, '复制号码' ],
API
Property | Type | Default | Description |
---|---|---|---|
funcs |
array of function |
[] |
function |
actions |
arrayof (React.Component or string ) |
[] |
item title name |
title |
React.Component or string |
'' |
top title |
buttonShows |
number |
6 |
number of items to show |
buttonHeight |
number |
50 |
item height |
buttonComponents |
React.Component |
null |
customize it youself when set, actions and funcs will be useless |
buttonComponentsHeight |
number |
150 |
buttonComponentsHeight use with buttonComponents |
animationType |
Easing | Easing.elastic(1) |
Animated.timing(v,{easing: animationType }) |