react native ：有办法为 open/close 抽屉的侧边栏菜单和头像做一个小汉堡图标吗？

Question

有没有办法在侧边栏菜单中添加汉堡图标？open/close 我尝试做一个可以打开或关闭侧边栏的图标，但我找不到如何使用 react nav 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;

Answer 1

您必须像下面这样更改您的代码。


   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;

这会将堆栈导航器嵌套在抽屉导航器中。

react native ：有办法为 open/close 抽屉的侧边栏菜单和头像做一个小汉堡图标吗？

react native : There is way to do an haburger icon to open/close the sidebar menu and avatar for drawer?

reactjs

react-native

react-navigation

react-navigation-v5