Question

这是我在原生基础（React-native）

中的简单项目的代码

<container>
    <Tabs initialPage={0}>
        <Tab heading={
            <TabHeading>
                <Text/>
            </TabHeading>
        }>
            <FirstScreen>
        </Tab>
        <Tab heading={
            <TabHeading>
                <Text/>
            </TabHeading>
        }>
            <SecondScreen>
        </Tab>
    </Tabs>

</container>

如何禁用第二个屏幕的标签？禁用装置，仍然可见但不可点击。谢谢！

Answer 1

如何使用两个标签？一个用于活动状态，一个用于禁用状态？你可以使用一个条件来区分。

<container>
<Tabs initialPage={0}>
    <Tab heading={
        <TabHeading>
            <Text/>
        </TabHeading>
    }>
        <FirstScreen>
    </Tab>

    { your condition for active tab && (<Tab heading={
        <TabHeading>
            <ActiveText/>
        </TabHeading>
    }>
        <ActiveScreen>
    </Tab>)}

    { your condition for disabled tab && (<Tab heading={
        <TabHeading>
            <DisabledText/> //maybe you could have grey color
        </TabHeading>
    }>
        <DisabledScreen> //you could show why the tab is disabled
    </Tab>)}

</Tabs>
</container>

已禁用的标签页可以点击。但你可以控制内容。这不完全是你想要的。但是给你这个，因为我找不到别的办法。：）

Answer 2

无法禁用标签本身。相反，你可以根据一些具有不透明灰色背景颜色的状态设置视图的样式，而不包含任何onPress事件。

if(this.state.disable)
{
 <Tabs style={diabled}>
 </Tabs>
}
else
{
 <Tabs style={enabled}>
 </Tabs>
}

Answer 3

有可能通过将Tabs组件包装在视图中并将指针事件设置为“无”来使其无法单击。

<View pointerEvents="none">
    <Tabs>
       ....
    </Tabs>
</View>

Answer 4

您可以在可滚动标签中覆盖renderTab道具

<Tabs 
  tabBarUnderlineStyle={{height:0}}
  renderTabBar={()=> <ScrollableTab renderTab={this.renderTab}}
  locked={true}
>

并在代码中更改renderTab以接受来自此类组件的禁用道具

    renderTab(
    name,
    page,
    isTabActive,
    onPressHandler,
    onLayoutHandler,
    tabStyle,
    activeTabStyle,
    textStyle,
    activeTextStyle,
    tabHeaderStyle,
    tabFontSize
  ) {
    const headerContent =
      typeof name !== "string" ? name.props.children : undefined;
    const { activeTextColor, inactiveTextColor } = this.props;
    const textColor = isTabActive ? activeTextColor : inactiveTextColor;
    const fontWeight = isTabActive ? "bold" : "normal";
    // const fontSize = tabFontSize;

    if (typeof name === "string") {
      return (
        <Button
          key={`${name}_${page}`}
          onPress={() => onPressHandler(page)}
          onLayout={onLayoutHandler}
        >
          <TabHeading
            scrollable
            style={isTabActive ? activeTabStyle : tabStyle}
            active={isTabActive}
          >
            <Text
              style={[
                isTabActive ? activeTextStyle : textStyle,
                { fontSize: tabFontSize }
              ]}
            >
              {name}
            </Text>
          </TabHeading>
        </Button>
      );
    } else {
      return (
        <Button
          key={v4()}
          onPress={() => onPressHandler(page)}
          onLayout={onLayoutHandler}
          disabled={name.props.disabled}
        >
          <TabHeading scrollable style={tabHeaderStyle} active={isTabActive}>
            {headerContent}
          </TabHeading>
        </Button>
      );
    }
}

您可以从以下路径找到原始代码： node_module->本机基础-> src->基本->选项卡-> scrollableTabBar.js

如何禁用本机基础中的选项卡中的选项卡

4 个答案: