react-native：是否有可能为网站提供 react-native 侧边栏？答案

【问题标题】：react-native: possibility to have a a sidebar for react-native for website?react-native：是否有可能为网站提供 react-native 侧边栏？
【发布时间】：2021-03-16 23:05:34
【问题描述】：

我用 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-native react-native-navigation

【解决方案1】：

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

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

【讨论】：