83 lines
2.5 KiB
TypeScript
83 lines
2.5 KiB
TypeScript
import * as React from 'react';
|
|
import { Image, Alert } from 'react-native';
|
|
|
|
import { ContextMenuView } from 'react-native-ios-context-menu';
|
|
|
|
import type { ContextMenuExampleProps } from './SharedExampleTypes';
|
|
import { ContextMenuCard } from '../components/ContextMenuCard';
|
|
|
|
// Generate a `ImageResolvedAssetSource` object based on the
|
|
// image assets....
|
|
|
|
const iconA = Image.resolveAssetSource(
|
|
require('../assets/emoji-pleading-face.png')
|
|
);
|
|
|
|
const iconB = Image.resolveAssetSource(
|
|
require('../assets/emoji-smiling-face-with-hearts.png')
|
|
);
|
|
|
|
const iconC = Image.resolveAssetSource(
|
|
require('../assets/emoji-sparkling-heart.png')
|
|
);
|
|
|
|
export function ContextMenuViewExample18(props: ContextMenuExampleProps) {
|
|
return (
|
|
<ContextMenuView
|
|
style={props.style}
|
|
menuConfig={{
|
|
menuTitle: 'ContextMenuViewExample18',
|
|
menuItems: [{
|
|
actionKey : 'key-01' ,
|
|
actionTitle: 'Action #1',
|
|
discoverabilityTitle: 'Use "REQUIRE" icon',
|
|
// `IconConfig` has been deprecated, please use
|
|
// `ImageItemConfig` instead (but it'll still work for now).
|
|
//
|
|
// The other two menu actions in this example
|
|
// uses `ImageItemConfig` to set the menu action icons.
|
|
icon: {
|
|
iconType: 'REQUIRE',
|
|
iconValue: iconA,
|
|
}
|
|
}, {
|
|
actionKey : 'key-02' ,
|
|
actionTitle: 'Action #2',
|
|
discoverabilityTitle: 'Use "IMAGE_REQUIRE" icon',
|
|
icon: {
|
|
// Set config to use images via `require`
|
|
type: 'IMAGE_REQUIRE',
|
|
// Pass in the corresponding
|
|
// `ImageResolvedAssetSource` object of the image
|
|
// that you want to use as the icon...
|
|
imageValue: iconB,
|
|
}
|
|
}, {
|
|
actionKey : 'key-03' ,
|
|
actionTitle: 'Action #3',
|
|
discoverabilityTitle: 'Use "IMAGE_REQUIRE" icon',
|
|
icon: {
|
|
type: 'IMAGE_REQUIRE',
|
|
imageValue: iconC,
|
|
}
|
|
}],
|
|
}}
|
|
onPressMenuItem={({nativeEvent}) => {
|
|
Alert.alert(
|
|
'onPressMenuItem Event',
|
|
`actionKey: ${nativeEvent.actionKey} - actionTitle: ${nativeEvent.actionTitle}`
|
|
);
|
|
}}
|
|
>
|
|
<ContextMenuCard
|
|
index={props.index}
|
|
title={'ContextMenuViewExample18'}
|
|
subtitle={'ImageType Icons'}
|
|
|
|
description={[
|
|
`Context menu with actions that uses 'IMAGE_REQUIRE' icons`
|
|
]}
|
|
/>
|
|
</ContextMenuView>
|
|
);
|
|
}; |