Question

好的，所以我只是在学习反应，所以请和我一起裸露。但是，我使用expo创建了一个基本应用，并对本机做出反应，并想添加一个抽屉式导航。我希望抽屉能在ios，android和网络浏览器上工作。因此，它在移动设备上运行良好，并且功能完善。但是，在Web浏览器上，当我打开应用程序时，它将以打开模式启动抽屉，然后您可以单击将其关闭的任何内容。它只是保持打开状态而不会关闭，并且实际上没有任何错误。

感谢您的提前帮助！

这是我的代码：

app.js

import React, {Component} from 'react'

import { createAppContainer } from 'react-navigation';
import { createDrawerNavigator } from 'react-navigation-drawer';
import { Dimensions } from 'react-native';

import { Feather } from '@expo/vector-icons';

import {
        ProfileScreen, 
        MessageScreen,
        ActivityScreen,
        ListScreen,
        ReportScreen,
        StatisticScreen,
        SignOutScreen  
      } from './src/screens';

import SideBar from './src/components/SideBar';

const DrawerNavigator = createDrawerNavigator(
  {
    ProfileScreen,
    MessageScreen,
    ActivityScreen,
    ListScreen,
    ReportScreen,
    StatisticScreen,
    SignOutScreen
},
{
  drawerPosition: 'left',
  drawerOpenRoute: 'DrawerOpen',
  drawerCloseRoute: 'DrawerClose',
  drawerToggleRoute: 'DrawerToggle',
//   contentComponent: props => <SideBar {...props} />
}
);

export default createAppContainer(DrawerNavigator);

screen.js

export default class Screen extends React.Component {

    render () {
        return (
           <View style={styles.container}>
                <SafeAreaView style={{ flex: 1}}>
                    <TouchableOpacity
                    style={{alignItems: "flex-end", margin: 16}}
                    onPress={this.props.navigation.openDrawer}
                    >
                     <FontAwesome5 name="bars" size={24} color="#161924" /> 
                    </TouchableOpacity>
                    <View style={{flex:1, alignItems: "center", justifyContent:"center"}}>
                        <Text style={styles.text}>{this.props.name} Screen</Text>
                    </View>
                </SafeAreaView>
           </View>    
        );
    }

}

index.js

import React from 'react';
import Screen from './Screen';

export const ProfileScreen = ({navigation}) => <Screen navigation={navigation} name="Profile" />;
export const MessageScreen = ({navigation}) => <Screen navigation={navigation} name="Message" />;
export const ActivityScreen = ({navigation}) => <Screen navigation={navigation} name="Activity" />;
export const ListScreen = ({navigation}) => <Screen navigation={navigation} name="List" />;
export const ReportScreen = ({navigation}) => <Screen navigation={navigation} name="Report" />;
export const StatisticScreen = ({navigation}) => <Screen navigation={navigation} name="Statistic" />;
export const SignOutScreen = ({navigation}) => <Screen navigation={navigation} name="SignOut" />;

sidebar.js

import React from 'react';
import { View, Text, StyleSheet, ScrollView, ImageBackground, Image} from 'react-native';
import { DrawerNavigationItems } from 'react-navigation-drawer';
import {Ionicons} from '@expo/vector-icons';

const Sidebar = props => {
    <ScrollView>
        <Text>Sidebar</Text>
    </ScrollView>
};

const styles = StyleSheet.create({

});

export default Sidebar;

React Native Web Browser Drawer不起作用

0 个答案: