Javascript React导航应用程序抽屉的初始路由名称参数（React本机）
我是React Native新手，遇到了一些与React导航应用程序抽屉相关的问题 我对使用初始路由名称参数的用法感到困惑。我想在堆栈中将我的初始屏幕设置为LoginScreen，但是当我尝试在堆栈中添加LoginScreen时，屏幕上会出现菜单图标。那么，如何删除特定屏幕的菜单图标呢 以下代码仅供参考： Drawer.jsJavascript React导航应用程序抽屉的初始路由名称参数（React本机）,javascript,reactjs,react-native,react-navigation,Javascript,Reactjs,React Native,React Navigation,我是React Native新手，遇到了一些与React导航应用程序抽屉相关的问题 我对使用初始路由名称参数的用法感到困惑。我想在堆栈中将我的初始屏幕设置为LoginScreen，但是当我尝试在堆栈中添加LoginScreen时，屏幕上会出现菜单图标。那么，如何删除特定屏幕的菜单图标呢 以下代码仅供参考： Drawer.js import React from 'react'; import { Image, StyleSheet } from 'react-native'; import {
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>
);
};
import React from 'react';
import { Provider } from 'react-native-paper';
import App from './src';
import { theme } from './src/core/theme';
import { NavigationContainer } from '@react-navigation/native';
import Drawer from './src/components/Drawer';
export default () => {
return (
<NavigationContainer>
<Drawer />
</NavigationContainer>
);
};
从“React”导入React；
从“react native”导入{Image，StyleSheet}；
从'@react navigation/stack'导入{createStackNavigator}；
进口{
抽屉式，
createDrawerNavigator，
DroperContentScrollView，
}来自“@react导航/抽屉”；
从“react native reanimated”导入动画；
从“@expo/vector icons”导入{Feather，AntDesign}；
从“expo ui kit”导入{块、按钮、文本}；
从“expo linear gradient”导入{LinearGradient}；
//屏风
从“../screens/ProductScreen”导入ProductScreen；
从“../screens/ProductDetail”导入ProductDetail；
从“../screens/Cart”导入购物车；
从“../screens/ProductHome”导入ProductHome
从“../screens/LoginScreen”导入LoginScreen
从“反应本机手势处理程序”导入{ScrollView}；
const Stack=createStackNavigator（）；
const Drawer=createDrawerNavigator（）；
常量屏幕=（{navigation，style}）=>{
返回(
(
navigation.openDrawer（）}>
),
}}>
{/*初始路由集*/}
{props=>}
{props=>}
{props=>}
);
};
常量抽屉内容=道具=>{
返回(
纯素卡丁车
contact@VEGAN.com
props.navigation.navigate（'ProductHome'）}
图标={（）=>}
/>
props.navigation.navigate（'ProductScreen'）}
图标={（）=>}
/>
props.navigation.navigate（'Cart'）}
图标={（）=>}
/>
props.navigation.navigate（'Cart'）}
图标={（）=>}
/>
props.navigation.navigate（'Cart'）}
图标={（）=>}
/>
props.navigation.navigate（'Cart'）}
图标={（）=>}
/>
props.navigation.navigate（'Cart'）}
图标={（）=>}
/>
props.navigation.navigate（'Cart'）}
图标={（）=>}
/>
props.navigation.navigate（'Cart'）}
图标={（）=>}
/>
props.navigation.navigate（'Cart'）}
图标={（）=>}
/>
props.navigation.navigate（'Cart'）}
图标={（）=>}
/>
props.navigation.navigate（'Cart'）}
图标={（）=>}
/>
props.navigation.navigate（'Cart'）}
图标={（）=>}
/>
props.navigation.navigate（'Cart'）}
图标={（）=>}
/>
props.navigation.navigate（'Cart'）}
图标={（）=>}
/>
}
onPress={（）=>警报（'您确定要注销吗？'）}
/>
);
};
导出默认值（）=>{
const[progress，setProgress]=React.useState（新的动画.Value（0））；
常量比例=动画。插值（进度{
输入范围：[0，1]，
输出范围：[1,0.8]，
});
const borderRadius=动画。插值（进度{
输入范围：[0，1]，
输出范围：[0,16]，
});
const animatedStyle={borderRadius，transform:[{scale}]}；
返回(
{
设置进度（道具进度）；
返回；
}}>
{props=>}
);
};
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>
);
};
import React from 'react';
import { Provider } from 'react-native-paper';
import App from './src';
import { theme } from './src/core/theme';
import { NavigationContainer } from '@react-navigation/native';
import Drawer from './src/components/Drawer';
export default () => {
return (
<NavigationContainer>
<Drawer />
</NavigationContainer>
);
};
从“React”导入React；
从“react native paper”导入{Provider}；
从“/src”导入应用程序；
从“./src/core/theme”导入{theme}；
从'@react-navigation/native'导入{NavigationContainer}；
从“./src/components/Drawer”导入抽屉；
导出默认值（）=>{
返回(
);
};
如何设置初始路线屏幕以及如何调用特定屏幕的菜单图标是我提出这个问题的主要目的。在你的Drawer.js中，你可以像这样做：
(
navigation.openDrawer（）}>
),
}}>
{/*初始路由集*/}
登录屏幕
{props=>}
{props=>}
{props=>}
这是可行的，但我不想在登录屏幕中显示菜单图标。如何从Drawer.js调用菜单按钮，仅用于特定屏幕@网络编码