@@ -383,6 +383,94 @@ export function ConversationDetailScreen(props: Props) {
383383}
384384```
385385
386+ ### 自定义消息上下文菜单样式
387+
388+ ` messageMenuStyle ` 支持三种模式: ` bottom-sheet ` 、` context ` 和 ` custom ` 。` bottom-sheet ` 模式通过页面组件底部弹出菜单,` context ` 模式类似微信,通过消息位置和点击位置弹出菜单,` custom ` 模式通过用户自定组件实现,需要遵守 ` MessageCustomLongPressMenu ` 约束。
389+
390+ ` custom ` 模式示例代码如下:
391+
392+ 1 . 在全局设置属性 ` Container.messageMenuStyle ` 为 ` custom ` 。其他模式不需要用户设置 ` MessageCustomLongPressMenu ` 。
393+
394+ ```
395+ export function App() {
396+ return (
397+ <UIKitContainer messageMenuStyle={'custom'}>
398+ {/* sub component */}
399+ </UIKitContainer>
400+ );
401+ }
402+ ```
403+
404+ 2 . 在 ` ConversationDetail ` 组件中设置属性 ` MessageCustomLongPressMenu ` 。
405+
406+ ```
407+ export const MyMessageContextNameMenu = React.forwardRef<
408+ ContextNameMenuRef,
409+ ContextNameMenuProps
410+ >(function (
411+ props: ContextNameMenuProps,
412+ ref?: React.ForwardedRef<ContextNameMenuRef>
413+ ) {
414+ const {} = props;
415+ React.useImperativeHandle(
416+ ref,
417+ () => {
418+ return {
419+ startShow: () => {},
420+ startHide: (_onFinished?: () => void) => {},
421+ startShowWithInit: (_initItems: InitMenuItemsType[], _?: any) => {},
422+ startShowWithProps: (_props: ContextNameMenuProps) => {},
423+ getData: () => {
424+ return undefined;
425+ },
426+ };
427+ },
428+ []
429+ );
430+ ref;
431+ return <View style={{ width: 100, height: 44, backgroundColor: 'red' }} />;
432+ });
433+
434+ type Props = NativeStackScreenProps<RootScreenParamsList>;
435+ export function MyConversationDetailScreen(props: Props) {
436+ const { route } = props;
437+
438+ return (
439+ <SafeAreaViewFragment>
440+ <ConversationDetail
441+ MessageCustomLongPressMenu={MyMessageContextNameMenu}
442+ />
443+ </SafeAreaViewFragment>
444+ );
445+ }
446+ ```
447+
448+ <ImageGallery >
449+ <ImageItem src =" /images/uikit/chatuikit/ios/configurationitem/chat/Appearance_chat_messageLongPressedActions.png " title =" bottom-sheet " />
450+ <
ImageItem src =
" /images/uikit/chatuikit/ios/configurationitem/chat/[email protected] " title =
" context " />
451+ </ImageGallery >
452+
453+ ### 自定义发送消息附件菜单样式
454+
455+ ` messageInputBarStyle ` 支持两种模式: ` bottom-sheet ` 和 ` extension ` 。` bottom-sheet ` 模式通过页面组件底部弹出菜单, ` context ` 模式通过布局组件实现。
456+
457+ 在全局通过设置属性 ` Container.messageInputBarStyle ` 属性决定菜单样式。
458+
459+ ```
460+ export function App() {
461+ return (
462+ <UIKitContainer messageInputBarStyle={'extension'}>
463+ {/* sub component */}
464+ </UIKitContainer>
465+ );
466+ }
467+ ```
468+
469+ <ImageGallery >
470+ <
ImageItem src =
" /images/uikit/chatuikit/ios/configurationitem/chat/[email protected] " title =
" bottom-sheet " />
471+ <
ImageItem src =
" /images/uikit/chatuikit/ios/configurationitem/chat/[email protected] " title =
" context " />
472+ </ImageGallery >
473+
386474### 事件通知
387475
388476事件通知在列表中已经实现,收到对应事件会更新列表。通常情况下,不需要开发者关注。
0 commit comments