Side-Menü nicht den gesamten Bildschirm abdecken (DrawerNavigator - React Native)

Question

Ich Bild von Bildschirm hinzufügen, dies funktioniert in einem Teil des Bildschirms. Der Kontaktbildschirm muss Hauptseite und nicht Bildschirm1 sein, aber es hat nicht funktioniert, wenn ich zwischen ihnen ersetzen. Ich habe den Code hinzugefügt, in 'LogedInNavigator' haben TabNavigator und DrawerNavigator - die 'Contants' Seite von TabNavigator und Teil zwei - Screen1 mit dem Side-Menü ist es von DrawerNavigator - vielleicht macht es das Problem?

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

mir bitte helfen ..

Answer 1

Sie können die Schublade Breite mit Abmessungen eingestellt Breite. Lesen Sie die Dokumentation hier

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