Блог

Главная - Вопросы по программированию - Начальный параметр имени маршрута для ящика приложения навигации React (React Native)

Начальный параметр имени маршрута для ящика приложения навигации React (React Native)

#javascript #reactjs #react-native #react-navigation

#javascript #reactjs #react-native #react-навигация

Вопрос:

Я новичок в React Native, и у меня возникли некоторые проблемы, связанные с ящиком приложения навигации React.

Меня смущает использование начального параметра имени маршрута. Я хочу установить свой начальный экран в качестве LoginScreen в стеке, но когда я пытаюсь добавить LoginScreen в stack, на экране появляется значок меню. Итак, как удалить значок меню для определенного экрана?

Ниже приведен код для некоторой ссылки:

Drawer.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>
  );
};

App.js

 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>
  );
};

Моей главной целью при постановке этого вопроса является настройка начального экрана маршрута, а также как вызвать значок меню для определенного экрана.

Ответ №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>

Комментарии:

1. Это работает, но я не хочу, чтобы значок меню отображался на экране входа в систему. как вызвать кнопку меню из Drawer.js только для определенных экранов?? @webcode