using DrawerNavigator as main UI, app always enter default item screen without displaying drawer items
I'm developing an app with ReactNative and React-Navigation.
And I set a DrawerNavigator as main UI.
But when app launches, it will always enter default item screen, without displaying drawer item.
What am I missing?
React-Navigation version: "2.18.2"
code of App.js is as the following. When it runs, App UI shows "page1" instead of showing 2 draw items 'page1' and 'page1'
import React, {Component} from 'react';
import {Text, View} from 'react-native';
import { DrawerNavigator } from 'react-navigation';
class Page1 extends Component {
render () {
return (
<View style={{padding: 50}}>
<Text>
Page1
</Text>
</View>
);
}
}
class Page2 extends Component {
render () {
return (
<View style={{padding: 50}}>
<Text>
Page2
</Text>
</View>
);
}
}
const DrawerNavi = DrawerNavigator({
Page1: {
screen: Page1
},
Page2: {
screen: Page2
}
});
export default class App extends React.Component {
render() {
return <DrawerNavi />;
}
}react-native react-navigation
asked Nov 28 '18 at 6:22
JcyrssJcyrss
442415
add a comment |
I'm developing an app with ReactNative and React-Navigation.
And I set a DrawerNavigator as main UI.
But when app launches, it will always enter default item screen, without displaying drawer item.
What am I missing?
React-Navigation version: "2.18.2"
code of App.js is as the following. When it runs, App UI shows "page1" instead of showing 2 draw items 'page1' and 'page1'
import React, {Component} from 'react';
import {Text, View} from 'react-native';
import { DrawerNavigator } from 'react-navigation';
class Page1 extends Component {
render () {
return (
<View style={{padding: 50}}>
<Text>
Page1
</Text>
</View>
);
}
}
class Page2 extends Component {
render () {
return (
<View style={{padding: 50}}>
<Text>
Page2
</Text>
</View>
);
}
}
const DrawerNavi = DrawerNavigator({
Page1: {
screen: Page1
},
Page2: {
screen: Page2
}
});
export default class App extends React.Component {
render() {
return <DrawerNavi />;
}
}react-native react-navigation
asked Nov 28 '18 at 6:22
JcyrssJcyrss
442415
add a comment |
I'm developing an app with ReactNative and React-Navigation.
And I set a DrawerNavigator as main UI.
But when app launches, it will always enter default item screen, without displaying drawer item.
What am I missing?
React-Navigation version: "2.18.2"
code of App.js is as the following. When it runs, App UI shows "page1" instead of showing 2 draw items 'page1' and 'page1'
import React, {Component} from 'react';
import {Text, View} from 'react-native';
import { DrawerNavigator } from 'react-navigation';
class Page1 extends Component {
render () {
return (
<View style={{padding: 50}}>
<Text>
Page1
</Text>
</View>
);
}
}
class Page2 extends Component {
render () {
return (
<View style={{padding: 50}}>
<Text>
Page2
</Text>
</View>
);
}
}
const DrawerNavi = DrawerNavigator({
Page1: {
screen: Page1
},
Page2: {
screen: Page2
}
});
export default class App extends React.Component {
render() {
return <DrawerNavi />;
}
}react-native react-navigation
asked Nov 28 '18 at 6:22
JcyrssJcyrss
442415
I'm developing an app with ReactNative and React-Navigation.
And I set a DrawerNavigator as main UI.
But when app launches, it will always enter default item screen, without displaying drawer item.
What am I missing?
React-Navigation version: "2.18.2"
code of App.js is as the following. When it runs, App UI shows "page1" instead of showing 2 draw items 'page1' and 'page1'
import React, {Component} from 'react';
import {Text, View} from 'react-native';
import { DrawerNavigator } from 'react-navigation';
class Page1 extends Component {
render () {
return (
<View style={{padding: 50}}>
<Text>
Page1
</Text>
</View>
);
}
}
class Page2 extends Component {
render () {
return (
<View style={{padding: 50}}>
<Text>
Page2
</Text>
</View>
);
}
}
const DrawerNavi = DrawerNavigator({
Page1: {
screen: Page1
},
Page2: {
screen: Page2
}
});
export default class App extends React.Component {
render() {
return <DrawerNavi />;
}
}import React, {Component} from 'react';
import {Text, View} from 'react-native';
import { DrawerNavigator } from 'react-navigation';
class Page1 extends Component {
render () {
return (
<View style={{padding: 50}}>
<Text>
Page1
</Text>
</View>
);
}
}
class Page2 extends Component {
render () {
return (
<View style={{padding: 50}}>
<Text>
Page2
</Text>
</View>
);
}
}
const DrawerNavi = DrawerNavigator({
Page1: {
screen: Page1
},
Page2: {
screen: Page2
}
});
export default class App extends React.Component {
render() {
return <DrawerNavi />;
}
}import React, {Component} from 'react';
import {Text, View} from 'react-native';
import { DrawerNavigator } from 'react-navigation';
class Page1 extends Component {
render () {
return (
<View style={{padding: 50}}>
<Text>
Page1
</Text>
</View>
);
}
}
class Page2 extends Component {
render () {
return (
<View style={{padding: 50}}>
<Text>
Page2
</Text>
</View>
);
}
}
const DrawerNavi = DrawerNavigator({
Page1: {
screen: Page1
},
Page2: {
screen: Page2
}
});
export default class App extends React.Component {
render() {
return <DrawerNavi />;
}
}react-native react-navigation
react-native react-navigation
asked Nov 28 '18 at 6:22
JcyrssJcyrss
442415
asked Nov 28 '18 at 6:22
JcyrssJcyrss
442415
asked Nov 28 '18 at 6:22
JcyrssJcyrss
442415
asked Nov 28 '18 at 6:22
JcyrssJcyrss
442415
asked Nov 28 '18 at 6:22
JcyrssJcyrss
442415
442415
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
const DrawerNavi = createDrawerNavigator({
Page1: {
screen: Page1
},
Page2: {
screen: Page2
}
});
You should use createDrawerNavigator instead of DrawerNavigator. I dont actually understand what you mean by "When it runs, App UI shows "page1" instead of showing 2 draw items 'page1' and 'page1'"
The drawerNavigator will show your drawerItems on the left or right (deppending on where you want to place it) then you can swipe left/right to access it. It also demmands that you have a default screen. You can change this default screen by passing initialRouteName to the component.
You can read more about the drawerNavigator here: https://reactnavigation.org/docs/en/drawer-navigator.html
answered Nov 28 '18 at 10:39
kivulkivul
667518
if this helped solve your issue, remember to mark as an answer as it will be much appreciated
– kivul
Nov 28 '18 at 12:45
1
yeah, that's it. I haven't noticed I need to swipe left/right to make the drawer show up. Actually my intention is to make the drawer be the entry screen without need to swipe, Is there any way to do that?
– Jcyrss
Nov 29 '18 at 0:52
You could add your buttons directly to the screen, then you could navigate to the pages that you want. And then on those pages add your drawer
– kivul
Nov 29 '18 at 8:48
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53513314%2fusing-drawernavigator-as-main-ui-app-always-enter-default-item-screen-without-d%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
const DrawerNavi = createDrawerNavigator({
Page1: {
screen: Page1
},
Page2: {
screen: Page2
}
});
You should use createDrawerNavigator instead of DrawerNavigator. I dont actually understand what you mean by "When it runs, App UI shows "page1" instead of showing 2 draw items 'page1' and 'page1'"
The drawerNavigator will show your drawerItems on the left or right (deppending on where you want to place it) then you can swipe left/right to access it. It also demmands that you have a default screen. You can change this default screen by passing initialRouteName to the component.
You can read more about the drawerNavigator here: https://reactnavigation.org/docs/en/drawer-navigator.html
answered Nov 28 '18 at 10:39
kivulkivul
667518
if this helped solve your issue, remember to mark as an answer as it will be much appreciated
– kivul
Nov 28 '18 at 12:45
1
yeah, that's it. I haven't noticed I need to swipe left/right to make the drawer show up. Actually my intention is to make the drawer be the entry screen without need to swipe, Is there any way to do that?
– Jcyrss
Nov 29 '18 at 0:52
You could add your buttons directly to the screen, then you could navigate to the pages that you want. And then on those pages add your drawer
– kivul
Nov 29 '18 at 8:48
add a comment |
const DrawerNavi = createDrawerNavigator({
Page1: {
screen: Page1
},
Page2: {
screen: Page2
}
});
You should use createDrawerNavigator instead of DrawerNavigator. I dont actually understand what you mean by "When it runs, App UI shows "page1" instead of showing 2 draw items 'page1' and 'page1'"
The drawerNavigator will show your drawerItems on the left or right (deppending on where you want to place it) then you can swipe left/right to access it. It also demmands that you have a default screen. You can change this default screen by passing initialRouteName to the component.
You can read more about the drawerNavigator here: https://reactnavigation.org/docs/en/drawer-navigator.html
answered Nov 28 '18 at 10:39
kivulkivul
667518
if this helped solve your issue, remember to mark as an answer as it will be much appreciated
– kivul
Nov 28 '18 at 12:45
1
yeah, that's it. I haven't noticed I need to swipe left/right to make the drawer show up. Actually my intention is to make the drawer be the entry screen without need to swipe, Is there any way to do that?
– Jcyrss
Nov 29 '18 at 0:52
You could add your buttons directly to the screen, then you could navigate to the pages that you want. And then on those pages add your drawer
– kivul
Nov 29 '18 at 8:48
add a comment |
const DrawerNavi = createDrawerNavigator({
Page1: {
screen: Page1
},
Page2: {
screen: Page2
}
});
You should use createDrawerNavigator instead of DrawerNavigator. I dont actually understand what you mean by "When it runs, App UI shows "page1" instead of showing 2 draw items 'page1' and 'page1'"
The drawerNavigator will show your drawerItems on the left or right (deppending on where you want to place it) then you can swipe left/right to access it. It also demmands that you have a default screen. You can change this default screen by passing initialRouteName to the component.
You can read more about the drawerNavigator here: https://reactnavigation.org/docs/en/drawer-navigator.html
answered Nov 28 '18 at 10:39
kivulkivul
667518
const DrawerNavi = createDrawerNavigator({
Page1: {
screen: Page1
},
Page2: {
screen: Page2
}
});
You should use createDrawerNavigator instead of DrawerNavigator. I dont actually understand what you mean by "When it runs, App UI shows "page1" instead of showing 2 draw items 'page1' and 'page1'"
The drawerNavigator will show your drawerItems on the left or right (deppending on where you want to place it) then you can swipe left/right to access it. It also demmands that you have a default screen. You can change this default screen by passing initialRouteName to the component.
You can read more about the drawerNavigator here: https://reactnavigation.org/docs/en/drawer-navigator.html
answered Nov 28 '18 at 10:39
kivulkivul
667518
answered Nov 28 '18 at 10:39
kivulkivul
667518
answered Nov 28 '18 at 10:39
kivulkivul
667518
answered Nov 28 '18 at 10:39
kivulkivul
667518
667518
if this helped solve your issue, remember to mark as an answer as it will be much appreciated
– kivul
Nov 28 '18 at 12:45
1
yeah, that's it. I haven't noticed I need to swipe left/right to make the drawer show up. Actually my intention is to make the drawer be the entry screen without need to swipe, Is there any way to do that?
– Jcyrss
Nov 29 '18 at 0:52
You could add your buttons directly to the screen, then you could navigate to the pages that you want. And then on those pages add your drawer
– kivul
Nov 29 '18 at 8:48
add a comment |
if this helped solve your issue, remember to mark as an answer as it will be much appreciated
– kivul
Nov 28 '18 at 12:45
1
yeah, that's it. I haven't noticed I need to swipe left/right to make the drawer show up. Actually my intention is to make the drawer be the entry screen without need to swipe, Is there any way to do that?
– Jcyrss
Nov 29 '18 at 0:52
You could add your buttons directly to the screen, then you could navigate to the pages that you want. And then on those pages add your drawer
– kivul
Nov 29 '18 at 8:48
if this helped solve your issue, remember to mark as an answer as it will be much appreciated
– kivul
Nov 28 '18 at 12:45
if this helped solve your issue, remember to mark as an answer as it will be much appreciated
– kivul
Nov 28 '18 at 12:45
1
1
yeah, that's it. I haven't noticed I need to swipe left/right to make the drawer show up. Actually my intention is to make the drawer be the entry screen without need to swipe, Is there any way to do that?
– Jcyrss
Nov 29 '18 at 0:52
yeah, that's it. I haven't noticed I need to swipe left/right to make the drawer show up. Actually my intention is to make the drawer be the entry screen without need to swipe, Is there any way to do that?
– Jcyrss
Nov 29 '18 at 0:52
You could add your buttons directly to the screen, then you could navigate to the pages that you want. And then on those pages add your drawer
– kivul
Nov 29 '18 at 8:48
You could add your buttons directly to the screen, then you could navigate to the pages that you want. And then on those pages add your drawer
– kivul
Nov 29 '18 at 8:48
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53513314%2fusing-drawernavigator-as-main-ui-app-always-enter-default-item-screen-without-d%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
