我可以禁用底部标签导航器中的选项卡之一吗？反应原生答案

【问题标题】：Can I disable one of the tabs in the bottomtabnavigator? React Native我可以禁用底部标签导航器中的选项卡之一吗？反应原生
【发布时间】：2021-09-07 09:06:49
【问题描述】：

我用过 react navigation 的createBottomTabNavigator。

从下面的代码中可以看出，如果它处于!this.props.isLoading 状态，它将被定向到购物车或付款选项卡。我这里有一个问题，如果选项卡之间的转换非常快，那么 API 请求可能会返回不正确的结果。

这就是为什么我想暂时禁用这些选项卡，但我无法成功。有人可以帮忙吗？

const Tab = createBottomTabNavigator();


</Tab.Navigator>
initialRouteName="Home"
screenOptions={({route}) => ({
      tabBarVisible: this.props.isTabBarVisible,
      unmountOnBlur: true,
      tabBarIcon: ({focused, color, size}) => {
        let iconName;
        switch (route.name) {
          case 'Home':
            return (
              <TouchableWithoutFeedback
                onPress={() => {
                  this.props.navigation.navigate('Home');
                  this.props.navigation.canGoBack();
                }}>
                <View style={styles.Tabs__iconContainer}>
                  <Icon
                    type="ionicon"
                    name={'home'}
                    color={color}
                    size={size - 4}
                  />
                </View>
              </TouchableWithoutFeedback>
            );
          case 'Customer':
            return (
              <View style={styles.Tabs__iconContainer}>
                <Icon
                  type="ionicon"
                  name={'person'}
                  color={color}
                  size={size - 4}
                />
                {this.customerCount ? (
                  <Badge
                    value={this.customerCount}
                    textStyle={styles.Tabs__customerTickTextStyle}
                    status={'success'}
                    containerStyle={styles.Tabs__badgeContainer}
                    badgeStyle={styles.Tabs__customerBadgeStyle}
                  />
                ) : null}
              </View>
            );
          case 'Cart':
            let totalProductCount = this.props.productList.reduce(
              (x, y) => x + y.quantity,
              0,
            );
            return (
              <TouchableWithoutFeedback
                onPress={() => {
                  if (!this.props.isLoading) {
                    setTimeout(() => {
                      this.props.navigation.navigate('Cart');
                    }, 100);
                  }
                }}>
                <View
                  style={[styles.Tabs__iconContainer, {paddingTop: '11%'}]}>
                  <Icon
                    type="ionicon"
                    name={'basket'}
                    color={color}
                    size={size + 1}
                  />
                  {totalProductCount > 0 ? (
                    <Badge
                      value={totalProductCount}
                      textStyle={
                        totalProductCount < 10
                          ? styles.Tabs__basketAmountLow
                          : totalProductCount < 100
                          ? styles.Tabs__basketAmountMedium
                          : totalProductCount < 1000
                          ? styles.Tabs__basketAmountHigh
                          : styles.Tabs__basketAmountHighest
                      }
                      status={'success'}
                      containerStyle={styles.Tabs__badgeContainer}
                      badgeStyle={styles.Tabs__basketBadgeStyle}
                    />
                  ) : null}
                </View>
              </TouchableWithoutFeedback>
            );
          case 'Payment':
            return (
              <TouchableWithoutFeedback
                onPress={() => {
                  if (!this.props.isLoading) {
                    setTimeout(() => {
                      this.props.navigation.navigate('Payment');
                    }, 100);
                  }
                }}>
                <View
                  style={[styles.Tabs__iconContainer, {paddingTop: '11%'}]}>
                  <Icon
                    type="ionicon"
                    name={'card-outline'}
                    color={color}
                    size={size + 1}
                  />
                </View>
              </TouchableWithoutFeedback>
            );
        }
        return (
          <Icon
            style={{paddingTop: 12}}
            type="ionicon"
            name={iconName}
            color={color}
            size={size}
          />
        );
      },
      title: '',
    })}
................
    <Tab.Screen name="Cart" component={Cart} />
        {configuration.paymentProviders.length > 0 && (
          <Tab.Screen name="Payment" component={Payment} />
    )}
</Tab.Navigator>

【问题讨论】：

嘿，禁用标签，您的意思是禁用标签的 onPress 对吧？
是的！我期望的是，当单击选项卡时，它在那段时间不起作用。

标签： reactjs react-native react-navigation

【解决方案1】：

这可能不是最简洁的答案，但我建议添加一个状态来帮助解决它。

const [loading, setLoading] = useState(false);

然后在每个Tab 中放置一个条件语句，您要禁用它的onPress，在下面的示例中，我将!loading 添加到if，因此单击时不会触发另一个导航。

case 'Payment':
        return (
          <TouchableWithoutFeedback
            onPress={() => {
              if (!this.props.isLoading && !loading) {
                setLoading(true);
                setTimeout(() => {
                  setLoading(false);
                  this.props.navigation.navigate('Payment');
                }, 100);
              }
            }}>
            <View
              style={[styles.Tabs__iconContainer, {paddingTop: '11%'}]}>
              <Icon
                type="ionicon"
                name={'card-outline'}
                color={color}
                size={size + 1}
              />
            </View>
          </TouchableWithoutFeedback>
        );

【讨论】：