Javascript 侧菜单未覆盖所有屏幕（抽屉显示器-反应本机）

我添加了屏幕的图像，这是屏幕的一部分。 联系人屏幕需要是主页面，而不是屏幕1，但如果我在他们之间替换，它就不起作用了。 我在“LogedInNavigator”中添加了代码，有TabNavigator和DrumerNavigator-从TabNavigator初始化的“Contants”页面，第二部分-屏幕1和侧菜单，它来自DrumerNavigator-可能是它造成了问题？

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

导入。。。。。。。
风格。。。。。。
const LoggedInNavigator=TabNavigator(
{
联系人：{screen:ContactScreen，}，
聊天：{screen:ChatScreen，}，
Dashbaord:{screen:DashbaordScreen，}，
配置文件：{screen:ProfileScreen，}，
搜索：{screen:SearchScreen，}，
}, 
{
initialRouteName：“联系人”，
tabbar位置：“底部”，
选项卡选项：{
showIcon：没错，
activeTintColor:'白色'，
}
}
);
导出默认值（）=>
导出常数抽屉=DrawerNavigator({
主页：{
屏幕：屏幕1，
导航选项：{
出票人：{
标签：“家”，
},
}
},  
摄像机：{
屏幕：屏幕2，
导航选项：{
出票人：{
标签：“照相机”，
},
}
}, 
}) 

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

类联系人扩展组件{
componentDidMount（）{
//TBD loggedin应该来自登录过程，并从这里删除
const{loggedIn，getContacts}=this.props；
loggedIn（1）；
getContacts（）；
}
render（）{
const Router=createRouter（（）=>（{}））；//IDAN
const{navigation，avatar，contacts}=this.props；
返回(
);
}
}
常量mapStateToProps=（状态）=>{
返回(
{
化身：state.user.user.avatar，
联系人：state.contacts.contacts，
}
);
};
导出默认连接（mapstatetops，{loggedIn，getContacts}）（Contacts）；

---

请帮帮我。

您可以使用尺寸宽度设置抽屉宽度。请看这里的文档

---

过了一会儿，我想回答我自己的问题（使用

react导航

v2） 里面的一切

侧菜单：

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

选项卡：

导出默认CreateBoottomTabNavigator({
菜单：{
屏幕：HomeStack，
导航选项：{
标题：“תפריט”，
tabBarIcon:（{focused，tintColor}）=>{
返回；
},
}
},
仪表板：{
屏幕：仪表板堆栈，
导航选项：{
标题：“בית”，
tabBarOnPress:（{navigation，defaultHandler}）=>handleTabPress（navigation，defaultHandler），
tabBarIcon:（{focused，tintColor}）=>{
返回；
},
}
},
快速查看：{
屏幕：快速导航，
导航选项：{
标题：“מבטמיר”，
tabBarIcon:（{focused，tintColor}）=>{
返回；
},
},
},
聊天：{
屏幕：聊天，
导航选项：{
标题：“צ’אט”，
tabBarIcon:（{focused，tintColor}）=>{
返回；
},
},
},
},
{
initialRouteName:“仪表板”，
选项卡选项：{
activeTintColor:'绿色'，
标签样式：{
尺寸：16，
marginBottom: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,
          }}

从“反应本机设备信息”导入设备信息模块；
如果您想让抽屉覆盖全屏，您可能需要为抽屉制作一个自定义组件。该组件中包含什么？我需要主页中的联系人页面。无论您需要什么，请查看react Navigation的官方文档我可以做什么来连接联系人页面？TabNavigator初始页和DrawerNavigator初始页也一样。它不起作用。。。打开后，宽度将显示在菜单上。因此，它将打开所有宽度屏幕，但仍在同一位置
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,
            },
        },
    },
)

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