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

对于添加页眉或任何您想要的内容，您应该使用抽屉内容道具，然后可以在其中制作自定义抽屉或操作现有的抽屉，如下例所示。

对于以编程方式显示/隐藏在抽屉中的屏幕，您可以将其与useState一起使用，或者通过redux存储并有条件地呈现或不呈现，请记住，导航器只是一个react组件。

我也让您吃点零食来在线检查。 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>
  );
}

ReactNative如何禁用单击抽屉菜单项

1 个答案: