Twilio Flex 插件如何使用自定义路由添加新选项卡

Question

我正在使用 Twilio Flex 插件在 React js 中自定义 flex ui。我想在侧边栏中添加一个自定义链接，其中包含一个带有新路由 URL(如“/shops”)的新自定义组件。

在该主体中加载该组件后，我想加载自定义商店。检查以下屏幕以获取更多详细信息。

在此先感谢您的帮助。

Answer 1

我找到了 Twilio 的这个视频，它很有帮助。 https://www.youtube.com/watch?v=ZMjKMoy1RPc

关键点是向 View 集合添加一个新 View ，并创建一个链接到它的新 SideLink。

import { FlexPlugin } from 'flex-plugin';
import { View, SideLink, Actions } from '@twilio/flex-ui';
import React from 'react';

export default class ShopPlugin extends FlexPlugin {
  constructor() {
    super('ShopPlugin');
  }

  init(flex, manager) {
    flex.ViewCollection.Content.add(
      <View name="shop-view" key="shop-view">
        <div>Your Shop View Goes Here</div>
      </View>
    )

    flex.SideNav.Content.add(
      <SideLink
        showLabel={true}
        icon="Thumbup"
        iconActive="ThumbupBold"
        isActive={activeView === 'shop-view'}
        onClick={() => {
          Actions.invokeAction('NavigateToView', {viewName: 'shop-view'});
        }
      >
        Shops
      </SideLink>
    )
  }
}