React Native: есть способ сделать значок гамбургера, чтобы открыть / закрыть меню боковой панели и аватар для ящика? - PullRequest
Новая
       7

React Native: есть способ сделать значок гамбургера, чтобы открыть / закрыть меню боковой панели и аватар для ящика?

0 голосов
/ 18 июня 2020

есть способ сделать значок гамбургера, чтобы открыть / закрыть меню боковой панели? Я пытаюсь сделать значок, который откроет или закроет боковую панель, но я не мог найти, как с реакцией навигатора 5. Также мне нужно знать, как поместить аватар png в меню ящика 

import Settings from '../screens/Settings';
import Screen1 from '../screens/Screen1';
import Screen2 from '../screens/Screen2';
import Screen3 from '../screens/Screen3';

const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();
const MaterialTopTabs = createMaterialTopTabNavigator();
const MaterialBottomTabs = createMaterialBottomTabNavigator();
const BottomTabs = createBottomTabNavigator();

const HomeStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Screen1" component={Screen1} />
      <Stack.Screen name="Screen2" component={Screen2} />
      <Stack.Screen name="Screen3" component={Screen3} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
};

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItem
        label="Settings"
        onPress={() => props.navigation.navigate('Settings')}
        // activeTintColor="red"
        // inactiveTintColor="black"
        focused="true"
      />
    </DrawerContentScrollView>
  );
}

const AppNavigator = (props) => {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        drawerContent={(props) => <CustomDrawerContent {...props} />}
      >
        <Drawer.Screen name="Home" component={HomeStack} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};
export default AppNavigator;

1 Ответ

1 голос
/ 18 июня 2020

Вам нужно будет изменить свой код, как показано ниже. 


   import Settings from '../screens/Settings';
import Screen1 from '../screens/Screen1';
import Screen2 from '../screens/Screen2';
import Screen3 from '../screens/Screen3';

const Drawer = createDrawerNavigator();
const Stack = createStackNavigator();
const MaterialTopTabs = createMaterialTopTabNavigator();
const MaterialBottomTabs = createMaterialBottomTabNavigator();
const BottomTabs = createBottomTabNavigator();

const HomeStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Screen1" component={Screen1} />
      <Stack.Screen name="Screen2" component={Screen2} />
      <Stack.Screen name="Screen3" component={Screen3} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
};

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItem
        label="Settings"
        onPress={() => props.navigation.navigate('Settings')}
      />
    </DrawerContentScrollView>
  );
}

const AppNavigator = (props) => {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        drawerContent={(props) => <CustomDrawerContent {...props} />}
      >
        <Drawer.Screen name="Home" component={HomeStack} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};
export default AppNavigator;

Это вложит навигатор стека в навигатор ящика.

...