侧边菜单未覆盖整个屏幕（DrawerNavigator - React Native）

Question

I adding image of screen, this work in part of screen. Contacts screen should be the main page instead of Screen1, but it doesn't work when I try to replace them. Here is the code:

In 'LogedInNavigator.js', there are two navigators - TabNavigator and DrawerNavigator. The 'Contacts' page is initialized from TabNavigator and Screen1 with the side menu is from DrawerNavigator. Maybe this is causing the problem?

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);

Help me please..

- Idan

---

如果你想让抽屉覆盖整个屏幕，很可能需要为抽屉制作一个自定义组件。 - Eduard

这个组件里有什么内容？我需要在主页上显示“联系人”页面。 - Idan

无论你需要什么，都可以查看React Navigation的官方文档。 - Eduard

我该如何连接联系人页面？TabNavigator的初始页面和DrawerNavigator的初始页面也是如何设置的？ - Idan

Answer 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,
            },
        },
    },
)

- Idan

Answer 2

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

<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抽屉式导航了解更多信息。

- Farhan08

Answer 3

从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,
          }}

- Rajesh N

Answer 4

您可以使用Dimensions width设置抽屉宽度。请参阅此处的文档

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
});

- DennisFrea

---

不起作用... 打开菜单后，它的宽度没有改变...所以它在屏幕上仍然停留在同一个位置，只是占据了整个屏幕的宽度。 - Idan