如何使用react-native创建侧边菜单？

Question

我是 React Native 的新手，我想创建一个像这样的侧边菜单，有这方面的参考吗？

Answer 1

我想说使用reactnavigation。即提供抽屉 要打开和关闭抽屉，请分别导航至“DrawerOpen”和“DrawerClose”。

 this.props.navigation.navigate('DrawerOpen'); // open drawer
    this.props.navigation.navigate('DrawerClose'); // close drawer

https://reactnavigation.org/docs/drawer-based-navigation.html

或者这是一个例子，这也很好。参考这个

https://github.com/dailydrip/react-native-navigation-sample

Answer 2

这是我的一个简单项目之一，可以向您展示如何自己实现侧边菜单。

https://github.com/reactazteam/PushyHorizontalMenu

Answer 3

在这里您可以找到可供使用的完整模板。

https://github.com/darde/react-native-sidemenu

Answer 4

我已经实现了这样的侧边栏。

这是我的反应导航版本

"@react-navigation/drawer": "^6.7.2"

const Drawer = createDrawerNavigator();

const renderIcon = (iconType: string, iconName: string, focused: boolean) => {
    switch (iconType !== undefined) {
        case iconType === "Material":
            return (
                <MaterialCommunityIcons
                    name={iconName}
                    size={24}
                    color={focused ? "#e91e63" : "black"}
                />
            )
        case iconType === "Feather":
            return (
                <Feather
                    name={iconName}
                    size={24}
                    color={focused ? "#e91e63" : "black"}
                />
            )
        case iconType === "FontAwesome5":
            return (
                <FontAwesome5
                    name={iconName}
                    size={24}
                    color={focused ? "#e91e63" : "black"}
                />
            )
        default:
            return null
    }
}

type IProps = {
    state: DrawerNavigationState<ParamListBase>;
    navigation: DrawerNavigationHelpers;
    descriptors: DrawerDescriptorMap;
};

const CustomDrawerContent = (props: IProps) => {
    return (
        <DrawerContentScrollView {...props}>
            <View
                style={{
                    flexDirection: "row",
                    alignItems: "center",
                    justifyContent: "space-between",
                    width: "100%",
                    paddingHorizontal: 16,
                    paddingVertical: 10,
                }}
            >
                <Image source={MyAppLogo} style={{ backgroundColor: "black" }} />
                <Entypo name="circle-with-cross" size={25} color="black" onPress={() => props.navigation.closeDrawer()} />
            </View>

            <DrawerItemList {...props} />
        </DrawerContentScrollView>
    )
};




const AppDrawer = () => {
    return (
        <Drawer.Navigator initialRouteName="Profile" drawerContent={(props) => <CustomDrawerContent {...props} />} >
            {
                DrawerItems.map(drawer =>
                    drawer.name === 'QR Scanner' ? (
                        <Drawer.Screen
                            key={drawer.name}
                            name={drawer.name}
                            options={{
                                headerShown: true,
                                drawerIcon: ({ focused }) => renderIcon(drawer.iconType, drawer.iconName, focused),
                                drawerLabel: ({ focused }) => (
                                    <View
                                        style={{
                                            flexDirection: "row",
                                            alignItems: "center",
                                            justifyContent: "space-between",
                                            width: "115%",
                                        }}
                                    >
                                        <Text style={{ fontWeight: "700", fontSize: 14 }}>{drawer.name}</Text>
                                        {
                                            focused &&
                                            <Entypo name="chevron-right" size={25} color="black" />
                                        }
                                    </View>
                                ),
                            }}
                            component={AppStack}
                        />
                    ) : (
                        <Drawer.Screen
                            key={drawer.name}
                            name={drawer.name}
                            options={{
                                drawerIcon: ({ focused }) => renderIcon(drawer.iconType, drawer.iconName, focused),
                                headerShown: true,
                                header: () => <Header screen={drawer.name} />,
                                drawerLabel: ({ focused }) => (
                                    <View
                                        style={{
                                            flexDirection: "row",
                                            alignItems: "center",
                                            justifyContent: "space-between",
                                            width: "115%",
                                        }}
                                    >
                                        <Text style={{ fontWeight: "700", fontSize: 14 }}>{drawer.name}</Text>
                                        {
                                            focused &&
                                            <Entypo name="chevron-right" size={25} color="black" />
                                        }
                                    </View>
                                ),
                            }}
                            component={drawer.component}
                        />
                    )
                )
            }
        </Drawer.Navigator>
    )
}

我添加了一个徽标和十字图标来关闭抽屉。

这是我的屏幕常量

export default [
  {
    name: 'Home',
    iconType: 'FontAwesome5',
    iconName: 'home',
    component: Home,
  },
  {
    name: 'Profile',
    iconType: 'Material',
    iconName: 'face-man-profile',
    component: ProfileScreen,
  },
  {
    name: 'QR Scanner',
    iconType: 'Material',
    iconName: 'scan-helper',
    component: ScanQRScreen,
  },
  {
    name: 'QR Generator',
    iconType: 'Material',
    iconName: 'qrcode-scan',
    component: GenerateQRScreen,
  },
  {
    name: 'Settings',
    iconType: 'Feather',
    iconName: 'settings',
    component: SettingsScreen,
  },
];

我已将堆栈导航器添加到抽屉屏幕之一。

这是代码

const AppStack = () => {

    return (
        <Stack.Navigator initialRouteName={"/"}>
            <Stack.Screen
                name="/"
                component={ScanQRScreen}
                options={{
                    headerShown: true,
                    header: () => null,

                }}
            />
        </Stack.Navigator>
    )
}

export default AppStack;

export const headerStyles = {
    headerStyle: {
        elevation: 0,
    },
    headerTintColor: '#000',
    headerTitleStyle: {
        fontWeight: 'bold',
    },
};

希望有帮助！