React导航应用程序抽屉的初始路线名称参数（React本机）

Question

我是React native的新手，并且遇到了与React导航应用抽屉有关的一些问题。

我对使用初始路由名参数的用法感到困惑。我想将初始屏幕设置为堆栈中的LoginScreen，但是当我尝试在堆栈中添加LoginScreen时，屏幕上会出现菜单图标。因此，如何删除特定屏幕的菜单图标。

下面是供参考的代码：

Drawer.js

error: base operand of '->' has non-pointer type 'Node<int>'
if(item < node->data)

App.js

import React from 'react';
import { Image, StyleSheet } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import {
  DrawerItem,
  createDrawerNavigator,
  DrawerContentScrollView,
} from '@react-navigation/drawer';
import Animated from 'react-native-reanimated';
import { Feather, AntDesign } from '@expo/vector-icons';
import { Block, Button, Text } from 'expo-ui-kit';
import { LinearGradient } from 'expo-linear-gradient';

// screens
import ProductScreen from '../screens/ProductScreen';
import ProductDetail from '../screens/ProductDetail';
import Cart from '../screens/Cart';
import ProductHome from '../screens/ProductHome'
import LoginScreen from '../screens/LoginScreen'




import { ScrollView } from 'react-native-gesture-handler';
const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

const Screens = ({ navigation, style }) => {
  return (
    <Animated.View style={StyleSheet.flatten([styles.stack, style])}>

      <Stack.Navigator
        screenOptions={{
          headerTransparent: true,
          headerTitle: null,
          
        
**// Here is the Common Menu button defined which is getting called in each screen**
          headerLeft: () => (
            <Button transparent onPress={() => navigation.openDrawer()}>
              <Feather name="menu" size={20} color="#FFFFFF" style={{ paddingHorizontal: 10 }} />
            </Button>
          ),
        }}>
              
      {/* inital route set */}

        <Stack.Screen name="ProductHome">{props => <ProductHome {...props} />}</Stack.Screen>
        <Stack.Screen name="ProductScreen">{props => <ProductScreen {...props} />}</Stack.Screen>
        <Stack.Screen name="Cart">{props => <Cart {...props} />}</Stack.Screen>
      </Stack.Navigator>
    </Animated.View>
  );
};

const DrawerContent = props => {
  return (
    <DrawerContentScrollView {...props} scrollEnabled={false} contentContainerStyle={{ flex: 1 }}>
      <Block>
        <Block flex={0.4} margin={20} alignItems={'center'} bottom>
          <Image
            source={{
              uri: 'https://images.vexels.com/media/users/3/137056/isolated/preview/1229f311106f8e5fe7bf368c8a42ca4f-vegan-ecology-label-badge-by-vexels.png',
              height: 120,
              width: 120,
              scale: 1,
              padding:40
            }}
            resizeMode="center"
            style={styles.avatar}
          />
          <Text white title>
            VEGAN KART
          </Text>
          <Text white size={9}>
            contact@VEGAN.com
          </Text>
        </Block>
        <Block>
          <ScrollView>
        <DrawerItem
            label="Home  "
            labelStyle={{ color: 'white', marginLeft: -16 , width:300,fontSize:20}}
            style={{ alignItems: 'flex-start', marginVertical: 0 ,fontSize:20}}
            onPress={() => props.navigation.navigate('ProductHome')}
            icon={() => <AntDesign name="home" color="white" size={18} />}
          />
          <DrawerItem
            label="Products  "
            labelStyle={styles.drawerLabel}
            style={styles.drawerItem}
            onPress={() => props.navigation.navigate('ProductScreen')}
            icon={() => <AntDesign name="isv" color="white" size={18} />}
          />
         
          <DrawerItem
            label="Cart  "
            labelStyle={{ color: 'white', marginLeft: -16,width:300,fontSize:20 }}
            style={{ alignItems: 'flex-start', marginVertical: 0 }}
            onPress={() => props.navigation.navigate('Cart')}
            icon={() => <AntDesign name="shoppingcart" color="white" size={18} />}
          />
           <DrawerItem
            label="About us  "
            labelStyle={{ color: 'white', marginLeft: -16,width:300,fontSize:20 }}
            style={{ alignItems: 'flex-start', marginVertical: 0 }}
            onPress={() => props.navigation.navigate('Cart')}
            icon={() => <AntDesign name="shoppingcart" color="white" size={18} />}
          />
          <DrawerItem
            label="About us  "
            labelStyle={{ color: 'white', marginLeft: -16,width:300,fontSize:20 }}
            style={{ alignItems: 'flex-start', marginVertical: 0 }}
            onPress={() => props.navigation.navigate('Cart')}
            icon={() => <AntDesign name="shoppingcart" color="white" size={18} />}
          />
          <DrawerItem
            label="About us  "
            labelStyle={{ color: 'white', marginLeft: -16,width:300,fontSize:20 }}
            style={{ alignItems: 'flex-start', marginVertical: 0 }}
            onPress={() => props.navigation.navigate('Cart')}
            icon={() => <AntDesign name="shoppingcart" color="white" size={18} />}
          />
          <DrawerItem
            label="About us  "
            labelStyle={{ color: 'white', marginLeft: -16,width:300,fontSize:20 }}
            style={{ alignItems: 'flex-start', marginVertical: 0 }}
            onPress={() => props.navigation.navigate('Cart')}
            icon={() => <AntDesign name="shoppingcart" color="white" size={18} />}
          />
          <DrawerItem
            label="About us  "
            labelStyle={{ color: 'white', marginLeft: -16,width:300,fontSize:20 }}
            style={{ alignItems: 'flex-start', marginVertical: 0 }}
            onPress={() => props.navigation.navigate('Cart')}
            icon={() => <AntDesign name="shoppingcart" color="white" size={18} />}
          />
          <DrawerItem
            label="About us  "
            labelStyle={{ color: 'white', marginLeft: -16,width:300,fontSize:20 }}
            style={{ alignItems: 'flex-start', marginVertical: 0 }}
            onPress={() => props.navigation.navigate('Cart')}
            icon={() => <AntDesign name="shoppingcart" color="white" size={18} />}
          />
          <DrawerItem
            label="About us  "
            labelStyle={{ color: 'white', marginLeft: -16,width:300,fontSize:20 }}
            style={{ alignItems: 'flex-start', marginVertical: 0 }}
            onPress={() => props.navigation.navigate('Cart')}
            icon={() => <AntDesign name="shoppingcart" color="white" size={18} />}
          />
          <DrawerItem
            label="About us  "
            labelStyle={{ color: 'white', marginLeft: -16,width:300,fontSize:20 }}
            style={{ alignItems: 'flex-start', marginVertical: 0 }}
            onPress={() => props.navigation.navigate('Cart')}
            icon={() => <AntDesign name="shoppingcart" color="white" size={18} />}
          />
          <DrawerItem
            label="About us  "
            labelStyle={{ color: 'white', marginLeft: -16,width:300,fontSize:20 }}
            style={{ alignItems: 'flex-start', marginVertical: 0 }}
            onPress={() => props.navigation.navigate('Cart')}
            icon={() => <AntDesign name="shoppingcart" color="white" size={18} />}
          />
          <DrawerItem
            label="About us  "
            labelStyle={{ color: 'white', marginLeft: -16,width:300,fontSize:20 }}
            style={{ alignItems: 'flex-start', marginVertical: 0 }}
            onPress={() => props.navigation.navigate('Cart')}
            icon={() => <AntDesign name="shoppingcart" color="white" size={18} />}
          />
          <DrawerItem
            label="About us  "
            labelStyle={{ color: 'white', marginLeft: -16,width:300,fontSize:20 }}
            style={{ alignItems: 'flex-start', marginVertical: 0 }}
            onPress={() => props.navigation.navigate('Cart')}
            icon={() => <AntDesign name="shoppingcart" color="white" size={18} />}
          />
          <DrawerItem
            label="About us  "
            labelStyle={{ color: 'white', marginLeft: -16,width:300,fontSize:20 }}
            style={{ alignItems: 'flex-start', marginVertical: 0 }}
            onPress={() => props.navigation.navigate('Cart')}
            icon={() => <AntDesign name="shoppingcart" color="white" size={18} />}
          />
          </ScrollView>
        </Block>
      </Block>

      <Block flex={false}>
        <DrawerItem
          label="Logout"
          labelStyle={{ color: 'white' ,fontSize:20 }}
          icon={() => <AntDesign name="logout" color="white" size={18} />}
          onPress={() => alert('Are your sure to logout?')}
        />
      </Block>
    </DrawerContentScrollView>
  );
};

export default () => {
  const [progress, setProgress] = React.useState(new Animated.Value(0));
  const scale = Animated.interpolate(progress, {
    inputRange: [0, 1],
    outputRange: [1, 0.8],
  });
  const borderRadius = Animated.interpolate(progress, {
    inputRange: [0, 1],
    outputRange: [0, 16],
  });

  const animatedStyle = { borderRadius, transform: [{ scale }] };

  return (
    <LinearGradient style={{ flex: 1 }} colors={['#000000','#0F411C', '#1A9A3B']}>
      <Drawer.Navigator
        // hideStatusBar
        drawerType="slide"
        overlayColor="transparent"
        drawerStyle={styles.drawerStyles}
        contentContainerStyle={{ flex: 1 }}
        drawerContentOptions={{
          activeBackgroundColor: 'transparent',
          activeTintColor: 'white',
          inactiveTintColor: 'white',
        }}
        sceneContainerStyle={{ backgroundColor: 'transparent' }}
        drawerContent={props => {
          setProgress(props.progress);
          return <DrawerContent {...props} />;
        }}>
        <Drawer.Screen name="Screens">
          {props => <Screens {...props} style={animatedStyle} />}
        </Drawer.Screen>
      </Drawer.Navigator>
    </LinearGradient>
  );
};

如何设置初始路线屏幕以及如何为特定屏幕调用菜单图标是我提出这个问题的主要目的。

感谢任何帮助 谢谢与问候

Answer 1

在Drawer.js中，您可以像这样操作：

 <Stack.Navigator initialRouteName="LoginScreen" 
        screenOptions={{
          headerTransparent: true,
          headerTitle: null,
          
        
**// Here is the Common Menu button defined which is getting called in each screen**
          headerLeft: () => (
            <Button transparent onPress={() => navigation.openDrawer()}>
              <Feather name="menu" size={20} color="#FFFFFF" style={{ paddingHorizontal: 10 }} />
            </Button>
          ),
        }}>
              
      {/* inital route set */}

<Stack.Screen name="LoginScreen">LoginScreen</Stack.Screen>
        <Stack.Screen name="ProductHome">{props => <ProductHome {...props} />}</Stack.Screen>
        <Stack.Screen name="ProductScreen">{props => <ProductScreen {...props} />}</Stack.Screen>
        <Stack.Screen name="Cart">{props => <Cart {...props} />}</Stack.Screen>
      </Stack.Navigator>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>