侧边菜单未覆盖所有屏幕（DrawerNavigator - React Native）

Posted 2023-04-13

【中文标题】侧边菜单未覆盖所有屏幕（DrawerNavigator - React Native）

【英文标题】：Side menu not covering all screen (DrawerNavigator - React Native)

【发布时间】：2018-04-30 22:44:49

【问题描述】：

我添加了屏幕的图像，这项工作在屏幕的一部分。 联系人屏幕需要是主页而不是 screen1，但如果我在它们之间替换它就不起作用。 我添加了代码，在'LogedInNavigator'中有TabNavigator和DrawerNavigator-从TabNavigator初始化的'Contants'页面和第二部分-带有来自DrawerNavigator的侧面菜单的Screen1-也许它正在解决问题？

LogedInNavigator.js

import.......
styles......

const LoggedInNavigator = TabNavigator(
  
    Contacts: screen: ContactScreen,,
    Chat: screen: ChatScreen,,
    Dashbaord: screen: DashbaordScreen,,
    Profile: screen: ProfileScreen,,
    Search: screen: SearchScreen,,
  , 
  
    initialRouteName: "Contacts", 
    tabBarPosition: "bottom",
    tabBarOptions: 
      showIcon: true,
      activeTintColor: 'white',
    
  
);

export default () => <LoggedInNavigator onNavigationStateChange=null />

export const Drawer = DrawerNavigator (
  Home:
    screen: Screen1,
    navigationOptions: 
      drawer:
        label: 'Home',
      ,
    
  ,  
  Camera: 
    screen: Screen2,
    navigationOptions: 
      drawer:
        label: 'Camera',
      ,
    
  , 
) 

Contants.js

class Contacts extends Component 
  componentDidMount() 
    // TBD loggedin should come from login process and removed from here
    const  loggedIn, getContacts  = this.props;
    loggedIn(1);
    getContacts();
  

  render() 
    const Router = createRouter( () => ()); //IDAN 
    const  navigation, avatar, contacts  = this.props;
    return (
      <NavigationProvider router=Router>
        <View style=flex:1>
          <ContactView
            navigation=navigation
            avatar=avatar
            contacts=contacts
          />
         <Drawer />
        </View>
      </NavigationProvider>
    );
  


const mapStateToProps = (state) => 
  return (
    
      avatar: state.user.user.avatar,
      contacts: state.contacts.contacts,
    
  );
;

export default connect(mapStateToProps,  loggedIn, getContacts )(Contacts);

请帮帮我..

【问题讨论】：

如果你想让你的抽屉覆盖全屏，你可能需要为抽屉制作一个自定义组件

这个组件里有什么？我需要主页中的联系人页面..

无论你需要什么，查看 react-navigation 的官方文档

我可以做些什么来连接联系人页面？ TabNavigator 初始页面和 DrawerNavigator 初始页面。

【参考方案1】：

过了一会儿，我想回答我自己的问题（react-navigation v2） <RootNavigator/>里面的所有东西@

const RootNavigator= createDrawerNavigator( Tabs , 
    contentComponent: SideMenu,
    drawerWidth: Dimensions.get('window').width * .75,
)

侧边菜单：

class SideMenu extends Component 
   render() 
        return ( //...your side menu view )
   

标签：

export default createBottomTabNavigator(
    Menu: 
        screen: HomeStack,
        navigationOptions: 
            title: 'תפריט',
            tabBarIcon: ( focused, tintColor ) => 
                return <Icon name='home' size=20 color=tintColor />;
            ,
        
    ,
    Dashboard: 
        screen: DashboardStack,
        navigationOptions: 
            title: 'בית',
            tabBarOnPress: ( navigation, defaultHandler ) => handleTabPress(navigation, defaultHandler),
            tabBarIcon: ( focused, tintColor ) => 
                return <Icon name='dashboard' size=20 color='green' />;
            ,
        
    ,
    QuickView: 
        screen: QuickNav,
        navigationOptions: 
            title: 'מבט מהיר',
            tabBarIcon: ( focused, tintColor ) => 
                return <Icon name='short-list' size=20 color=tintColor />;
            ,
        ,
    ,
    Chat: 
        screen: Chat,
        navigationOptions: 
            title: "צ'אט",
            tabBarIcon: ( focused, tintColor ) => 
                return <Icon name='chat' size=20 color=tintColor />;
            ,
        ,
    ,
,
    
        initialRouteName: 'Dashboard',
        tabBarOptions: 
            activeTintColor: 'green',
            labelStyle: 
                fontSize: 16,
                marginBottom: 3,
            ,
        ,
    ,
)

【参考方案2】：

从 v5 开始，您可以使用抽屉样式

import deviceInfoModule from 'react-native-device-info';


 <Drawer.Navigator
          drawerStyle=
            width: deviceInfoModule.isTablet()
              ? Dimensions.get('window').width * 0.55
              : Dimensions.get('window').width * 0.7,
          

【参考方案3】：

您可以使用尺寸宽度设置抽屉宽度。在此处查看文档

https://reactnavigation.org/docs/navigators/drawer

import  Dimensions  from 'react-native';

...

const  width  = Dimensions.get('screen');

...

export const Drawer = DrawerNavigator (

  Home:
    screen: Screen1,
    navigationOptions: 
      drawer:
        label: 'Home',
      ,
    
  ,  
  Camera: 
    screen: Screen2,
    navigationOptions: 
      drawer:
        label: 'Camera',
      ,
    
  , 
,

  drawerWidth: width
);

【讨论】：

它不起作用...打开后菜单的宽度..所以它打开了所有宽度的屏幕但它仍然在同一个地方

【参考方案4】：

在 react-navigation 版本 6 中，您可以使用 Drawer.Navigator 组件中 screenOptions 属性中的 drawerStyle 来更改宽度并添加样式。这会将应用的样式应用到导航器中的所有屏幕。

<Drawer.Navigator
  screenOptions: 
    drawerStyle: 
      width: 240
    
  
>

如果您希望抽屉覆盖整个屏幕，则从 react-native 库中导入 Dimensions 并使用 Dimensions.get('window') .width

import  Dimensions  from 'react-native'

<Drawer.Navigator
  screenOptions: 
    drawerStyle: 
      width: Dimensions.get('window').width
    
  
>

更多信息请参考react-navigation drawer。