如何为中心选项卡栏项创建自定义操作答案

【问题标题】：How To Create a Custom Action for the Center Tab Bar Item如何为中心选项卡栏项创建自定义操作
【发布时间】：2021-09-24 11:08:36
【问题描述】：

我想在用户单击中心按钮时显示按钮的模式。

我怎样才能做到这一点？

【问题讨论】：

标签： reactjs react-native react-redux rxjs

【解决方案1】：

在你的标签屏幕上

        <Tab.Screen name="modal" component={YourModalCompnent} />

你的模态组件

             const dropdownRef = useRef<DropdownRef>(null);


        <Dropdown
      ref={dropdownRef}
      title={
        <Text>
          What did you do?
        </Text>
      }
      showSwipeIndicator={false}
      roundedTop="2xl"
    >
      <Dropdown.Option value={0}>
        <Div flex={1} alignItems="center">
          your modal content
        </Div>}
      </Dropdown.Option>
      <Dropdown.Option value={3} py="md" px="xl" block>
        <ButtononPress={() => dropdownRef.current?.close()}> close modal button</Button>
      </Dropdown.Option>
    </Dropdown>

reference 我使用 magnus UI 中的模态，它是可定制的。但是您可以使用自己的自定义模态或您选择的任何模态。您还可以让模态组件的状态始终处于打开状态，或者您可以将其作为道具传递

链接到https://magnus-ui.com/

【讨论】：