如何在 react-native navigator 中隐藏导航项？

Question

我是 React Native 的新手。我必须为 WordPress 后端制作一个应用程序。我在 DrawerNavigaton、Home 和 Categories、PostPage 和 Category 屏幕中有四个项目。

<NavigationContainer>
      <Drawer.Navigator>
             <Drawer.Screen name="Home" component={Home}/>
             <Drawer.Screen name='Categories' component={Categories} 
             <Drawer.Screen name="PostPage" component={PostPage}/>
             <Drawer.Screen name='Category' component={Category}/>
      </Drawer.Navigator>
 </NavigationContainer>

我只想隐藏最后两项。 谢谢。

Answer 1

然后使用自定义抽屉

示例代码：

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import {
  createDrawerNavigator,
  DrawerContentScrollView,
  DrawerItemList,
  DrawerItem,
  useDrawerProgress,
} from '@react-navigation/drawer';
import Animated from 'react-native-reanimated';

function Home() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

function Categories() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Categories Screen</Text>
    </View>
  );
}

function PostPage() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>PostPage Screen</Text>
    </View>
  );
}

function Category() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Category Screen</Text>
    </View>
  );
}

function CustomDrawerContent(props) {
  const progress = useDrawerProgress();

  const translateX = Animated.interpolateNode(progress, {
    inputRange: [0, 1],
    outputRange: [-100, 0],
  });

  return (
    <DrawerContentScrollView {...props}>
      <Animated.View style={{ transform: [{ translateX }] }}>
        <DrawerItem label="Home" onPress={() => alert('Link to Home')} />
        <DrawerItem
          label="Categories"
          onPress={() => alert('Link to Categories')}
        />
      </Animated.View>
    </DrawerContentScrollView>
  );
}

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator
      useLegacyImplementation
      drawerContent={(props) => <CustomDrawerContent {...props} />}>
      <Drawer.Screen name="Home" component={Home} />
      <Drawer.Screen name="Categories" component={Categories} />
      <Drawer.Screen name="PostPage" component={PostPage} />
      <Drawer.Screen name="Category" component={Category} />
    </Drawer.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <MyDrawer />
    </NavigationContainer>
  );
}

演示链接https://snack.expo.dev/mYo_6RI0a

参考：https://reactnavigation.org/docs/drawer-navigator/

Answer 2

只是这段代码产生了魔力：

<Drawer.Navigator>
        <Drawer.Screen name="Home" component={Home}/>
        <Drawer.Screen name="Offices" component={Offices}/>
        <Drawer.Screen name="PostPage"
                       options={{
                           drawerItemStyle: {
                               display: 'none'
                           }
                       }} component={PostPage}/>
        <Drawer.Screen name="Category"
                       options={{
                           drawerItemStyle: {
                               display: 'none'
                           }
                       }}
                       component={Category}/>
    </Drawer.Navigator>