react-native - 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-nativereact-native-navigation

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

问题描述

解决方案

推荐阅读