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

Question

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

在该组件中加载该组件后，我要加载自定义商店。 检查以下屏幕以了解更多详细信息。

预先感谢您的帮助。

Answer 1

我发现Twilio的这段视频很有帮助。 https://www.youtube.com/watch?v=ZMjKMoy1RPc

关键点是向视图集合中添加一个新视图，并创建一个链接到它的新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>
    )
  }
}