taro在nut-tab-pane中正切使用弹出层的例子

Taro是一个用于快速构建跨平台移动应用的框架，它基于React技术栈。在Nut (Ant Design Mobile for Taro) 中，`nut-tab-pane` 是一个标签页组件，而想要在其中实现弹出层（通常称为 Modal 或 Alert），你可以结合 `taro-popup` 组件来完成。

下面是一个简单的例子，展示了如何在点击 `nut-tab-pane` 内的一个按钮时，弹出一个模态框：

import { View, Button, TabBar, TabPane, Popup } from '@ant-design/taro-mobile';
import { confirm } from '@ant-design/icons';

// 假设我们有一个TabPane组件，其中有个按钮触发弹出层
const TabPaneWithPopup = () => {
  const showModal = async () => {
    await Popup.show({
      title: '提示',
      content: '这是一个弹出消息',
      maskClosable: true, // 是否允许用户通过点击蒙版关闭弹窗
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        // 弹窗确认后的操作
      },
      onCancel: () => {
        // 弹窗取消后的操作
      },
      icon: confirm, // 使用图标
    });
  };

  return (
    <View>
      {/* tab pane内容 */}
      <Button onClick={showModal}>显示弹出层</Button>

      {/* tab pane本身 */}
      <TabPane key="tab1">
        <View>这是第一个Tab的内容</View>
      </TabPane>
    </View>
  );
};

// 然后在TabBar中包含这个TabPaneWithPopup
<TabBar>
  <TabPane paneTitle="Tab 1" selectedKeys={['tab1']}>
    <TabPaneWithPopup />
  </TabPane>
</TabBar>