react-native：是否有可能为网站的 react-native 设置侧边栏？

问题描述

我使用 Drawer.Navigator 测试了一个带有 react-native 的侧边栏等导航示例

示例：

<Drawer.Navigator
                drawerContentOptions={{
                    activeTintColor: '#e91e63',itemStyle: { marginVertical: 5 },}}
                drawerContent={(props) => <CustomSidebarMenu {...props} />}>
                <Drawer.Screen
                    name="FirstPage"
                    options={{ drawerLabel: 'First page Option' }}
                    component={firstScreenStack}
                />
                <Drawer.Screen
                    name="SecondPage"
                    options={{ drawerLabel: 'Second page Option' }}
                    component={secondScreenStack}
                />
            </Drawer.Navigator>

我的自定义侧边栏：

    import React from 'react';
import {
    SafeAreaView,View,StyleSheet,Image,Text,Linking,} from 'react-native';

import {
    DrawerContentScrollView,DrawerItemList,DrawerItem,} from '@react-navigation/drawer';

const CustomSidebarMenu = (props) => {
    const BASE_PATH =
        'https://raw.githubusercontent.com/AboutReact/sampleresource/master/';
    const proileImage = 'react_logo.png';

    return (
        <SafeAreaView style={{ flex: 1 }}>
            {/*Top Large Image */}
            <Image
                source={{ uri: BASE_PATH + proileImage }}
                style={styles.sideMenuProfileIcon}
            />
            <DrawerContentScrollView {...props}>
                <DrawerItemList {...props} />
                <DrawerItem
                    label="Visit Us"
                    onPress={() => Linking.openURL('https://aboutreact.com/')}
                />
                <View style={styles.customItem}>
                    <Text
                        onPress={() => {
                            Linking.openURL('https://aboutreact.com/');
                        }}>
                        Rate Us
                    </Text>
                    <Image
                        source={{ uri: BASE_PATH + 'star_filled.png' }}
                        style={styles.iconStyle}
                    />
                </View>
            </DrawerContentScrollView>
            <Text style={{ fontSize: 16,textAlign: 'center',color: 'grey' }}>
                www.aboutreact.com
            </Text>
        </SafeAreaView>
    );
};

如果我为 Web 构建，结果对 Web 不利。

模式关闭，网页初始化

模式打开

我找不到在 web.xml 中对此进行调整的解决方案。在同一索引中打开侧边栏。这不是一个好的实践，但也许这是不可能的。有人遇到同样的问题吗？

提前致谢

解决方法

React Navigation 让您可以选择使用 Drawer 组件中的 drawerType 道具来决定您想要哪种类型的抽屉。

您可以根据平台添加一些逻辑来更改 drawerType 的值，您应该可以实现您想要的