React Native 如何禁用点击抽屉菜单项

Question

抽屉菜单设置如下。我怎样才能禁用点击第一个 Drawer.Screen ？它必须显示单张图片！！

还有我如何以编程方式隐藏一个元素？

    <Drawer.Navigator
      initialRouteName="Feed"
      drawerPosition="right"
           drawerStyle={{
            backgroundColor: '#c7c4b8',
            width: 240,
          }}
       overlayColor="transparent">

      <Drawer.Screen
        name="Profile2"
        component={Profile2}
        options={{ drawerLabel: '', drawerIcon: ({ focused, size }) => (
            <Image source={require('./images/3.jpg')}   resizeMode={'cover'}  style={{ width: '100%', height: 200 }} />) 
        }}
      />

      <Drawer.Screen
        name="Home"
        component={Notifications}
        options={{ drawerLabel: 'Feed' }}
      />
      <Drawer.Screen
        name="Routes"
        component={Profile}
options={{ drawerLabel: 'Routes' }}
      />
    </Drawer.Navigator>

Answer 1

要添加 header 或任何你想要的东西，你应该使用 drawerContent 道具，在那里你可以制作你的自定义抽屉或操作现有抽屉，如下例所示。

对于抽屉中的 show/hide 屏幕，您可以通过编程方式将其与 useState 一起使用或传递 redux 存储并有条件地渲染它，请记住导航器只是一个反应组件。

我给你点心也上网查一下。 https://snack.expo.io/@anthowm/drawer-navigation-%7C-react-navigation

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

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

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

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
       <Image source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}   resizeMode={'cover'}  style={{ width: '100%', height: 200 }} />
      <DrawerItemList {...props} />
      <DrawerItem
        label="Hide Screen"
        onPress={() => props.setShow(false)}
      />
    </DrawerContentScrollView>
  );
}

const Drawer = createDrawerNavigator();

function MyDrawer() {
  const [show, setShow] = useState(true);

  return (
    <Drawer.Navigator drawerContent={props => <CustomDrawerContent setShow={setShow} {...props} />}>
      <Drawer.Screen name="Feed" component={Feed} />
      {show && <Drawer.Screen name="Article" component={Article} />}
    </Drawer.Navigator>
  );
}

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

React Native 如何禁用点击抽屉菜单项

ReactNative how to disable click on drawer menu item

navigation-drawer

react-native