双标题和双安装主屏幕-反应导航

Question

I've been having this problem for a long time and I just can't find an answer for fixing it.
Here is an actual screenshot of what is happening.

The problems are:

1. Back button by default on Newsfeed screen
2. Double header
3. TabBar disappears when navigating to any global screens

The code itself:

routes.js

const RecordScreen = StackNavigator({
  Main:   { screen: Record },
  Choose: { screen: RecordChoose },
  Add:    { screen: RecordAdd }
})

const NewsfeedScreen = StackNavigator({
  Main:    { screen: Newsfeed },
  Details: { screen: NewsfeedDetails }
})

export const FriendsScreen = StackNavigator({
  Main: { screen: Friends },
  List: { screen: FriendList }
})

const Tabs = TabNavigator({
  Record:   { screen: RecordScreen },
  Newsfeed: { screen: NewsfeedScreen },
  Friends:  { screen: FriendsScreen }
})

// is it correct to nest TabNavigator with StackNavigator like this?
export const LoggedIn = StackNavigator({
  Main: { screen: Tabs },

  // global Screens
  Gallery:  { screen: Gallery },
  Profile:  { screen: Profile  },
  Settings: { screen: Settings }
})

export const LoggedOut = StackNavigator({
  Welcome: { screen: Welcome },
  SignIn:  { screen: SignIn },
  SignUp:  { screen: SignUp }
})

index.js

import React, { Component } from 'react'
import { LoggedIn, LoggedOut } from '@routes'

class Main extends Component {

  // of course is not exactly like this,
  // just an example
  state = {
    loggedIn: true
  }

  render() {
    return this.state.loggedIn
      ? <LoggedIn />
      : <LoggedOut />
  }
}

Any help is appreciated! Thank you.

Answer 1

does the following change make things any better?

from:

export const LoggedIn = StackNavigator({
  Main: { screen: Tabs },

  // global Screens
  Gallery:  { screen: Gallery },
  Profile:  { screen: Profile  },
  Settings: { screen: Settings }
})

to

const doNotShowHeaderOption = {
  navigationOptions: {
    header: null,
  },
};
export const LoggedIn = StackNavigator({
  Main: { screen: Tabs, ...doNotShowHeaderOption, },

  // global Screens
  Gallery:  { screen: Gallery },
  Profile:  { screen: Profile  },
  Settings: { screen: Settings }
})