Menu
I am developing an app using react-native-navigation and I want to have a StackNavigator and a DrawerNavigator in the project. So, I have implemented them in the app.js but the apps crashes giving this error "The development server returned response error with code: 500".I have implemented them separetly and it works but I couldn't implement them together.Any suggestion?
this is my code for app.js
import React, {
Component
} from 'react';
import {
StyleSheet,
Text,
View
} from 'react-native';
import {
createStackNavigator,
DrawerNavigator,
DrawerItems
} from "react-navigation";
import {
Container,
Header,
Content,
Thumbnail,
Button,
Body
} from 'native-base';
import Profile from './components/Profile.js';
import Main from './components/Main.js';
import Login from './components/Login.js';
import Product from './components/Product.js';
export default class App extends Component {
render() {
return (
<Navapp />
);
}
}
const styles = StyleSheet.create({
// styles here
});
export const Drawer = DrawerNavigator({
Main: {
screen: Main
},
Profile: {
screen: Profile
},
}, {
initialRouteName: 'Main',
contentComponent: CustomDrawer,
drawerPosition: 'Left',
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
});
export const CustomDrawer = (props) => (
<Container>
<Header style = {
styles.headerStyle
}>
<Body style = {
styles.bodyStyle
}>
<Thumbnail style = {
{
height: 100,
width: 100
}
}
source = {
require('../image/logo.png')
}/>
</Body>
</Header>
<Content>
<DrawerItems { ...props} />
</Content >
</Container>
)
export const Navapp = createStackNavigator({
Login: {
screen: Login
},
Drawer: {
screen: Drawer
},
Product: {
screen: Product
},
});
691
I had a very similar setup for my app, this is how I went about handling it. First I created a stack navigator with the routes that I wanted logged in users to see, and I place that navigator inside a drawer navigator (you can put more than one in there if you want). Finally I created my top-level navigator, whose initial route points to the login page; upon logging in I navigate the user to the second route, which points to my drawer navigator.
In practice it looks like this:
// Main Screens for Drawer Navigator
export const MainStack = StackNavigator({
Dashboard: {
screen: Dashboard,
navigationOptions: {
title: 'Dashboard',
gesturesEnabled: false,
headerLeft: null
}
},
Notifications: {
screen: Notifications,
navigationOptions: {
title: 'Notifications'
}
}
}, { headerMode: 'screen' } );
// Drawer Navigator
export const Drawer = DrawerNavigator({
MainStack: {
screen: MainStack
}
});
// Main App Navigation
export const AppStack = StackNavigator({
Login: {
screen: Login,
navigationOptions: {
header: null,
gesturesEnabled: false
}
},
Drawer: {
screen: Drawer,
navigationOptions: {
header: null,
gesturesEnabled: false
}
}
}, { headerMode: 'none' } );
// In Your App.js
<AppStack />
Note that in the last stack navigator, the drawer screen has header set to null; this is because with nested stack navigators you can sometimes run into an issue where you'll have duplicate headers. This will hide the top-level navigator's header and let you show / customize the headers for your nested navigators.
99
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
