Question

如果我使用的是e.preventDefault()（在图像上看到的最右边的按钮），是否有一种方法可以突出显示抽屉底部的标签，并在关闭时突出显示上次停止的位置？

const BottomTabNavigation = ({ navigation }) => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused }) => {
          let iconName;

          switch (route.name) {
            case 'Home':
              iconName = 'window-maximize';
              break;
            case 'Purchases':
              iconName = 'tags';
              break;
            case 'Notifications':
              iconName = 'bell';
              break;
            case 'Checkout':
              iconName = 'shopping-cart';
              break;
            case 'Orders':
              iconName = 'dollar';
              break;
            case 'Menu':
              iconName = 'navicon';
              break;
          }

          return (
            <Icon
              name={iconName}
              size={20}
              color={focused ? '#00bcd7' : 'grey'}
            />
          );
        },
      })}
      tabBarOptions={{
        showLabel: false,
      }}>
      <Tab.Screen name="Home" component={LandingScreens} />
      <Tab.Screen name="Purchases" component={PurchasesScreens} />
      <Tab.Screen name="Notifications" component={Notifications} />
      <Tab.Screen name="Checkout" component={CheckoutScreens} />
      <Tab.Screen name="Orders" component={OrdersScreens} />
      <Tab.Screen
        name="Menu"
        component={DrawerNavigation}
        listeners={({ navigation }) => ({
          tabPress: (e) => {
            navigation.openDrawer();
            e.preventDefault();
          },
        })}
      />
    </Tab.Navigator>
  );
};

const CustomDrawerContent = (props) => {
  return (
    <DrawerContentScrollView {...props}>
      {/* https://sunriseintegration.atlassian.net/browse/TSLMA-59*/}
      {/* https://sunriseintegration.atlassian.net/browse/TSLMA-60*/}
      {/*<DrawerItemList {...props} />*/}
    </DrawerContentScrollView>
  );
};

const DrawerNavigation = ({ navigation }) => {
  return (
    <DrawerNavigator.Navigator
      style={{ display: 'none' }}
      screenOptions={{
        headerStyle: {
          display: 'none',
        },
      }}
      drawerContent={(props) => <CustomDrawerContent {...props} />}>
      <DrawerNavigator.Screen
        name="BottomTabNavigation"
        component={BottomTabNavigation}
        options={{
          drawerLabel: () => null,
          title: null,
          drawerIcon: () => null,
        }}
      />
    </DrawerNavigator.Navigator>
  );
};

Answer 1

我最终弄清楚了它，不确定它是否是最好的解决方案，但是很高兴它能正常工作……至少在我为iOS测试时：

<Tab.Screen
    name="Menu"
    component={DrawerNavigation}
    listeners={({ navigation }) => ({
      tabPress: (e) => {
        e.preventDefault();
        navigation.toggleDrawer();
        navigation.setOptions({
          tabBarIcon: () => {
            return (
              <Icon
                name={'navicon'}
                size={20}
                color={useIsDrawerOpen() ? '#00bcd7' : 'grey'}
              />
            );
          },
        });
      },
    })}
  />

带有抽屉的React Native v5底部标签导航

1 个答案: