title: React-Navigation: Tab name and header name is same
body: <p>I am using react-navigation,
  I have a nested <code>StackNavigator</code> insdie my <code>TabNavigator</code>
  Here is the code </p>
  
  <pre><code>  const MainNavigator = TabNavigator({
   selectadmin: { screen: SelectAdminScreen },
   otp: { screen: OtpScreen },
   password: { screen: PasswordScreen },
   pin: { screen: PinScreen },
   main: {
     screen: TabNavigator({
       orders: {
             screen: StackNavigator({
               orderlist: { screen: OrderListScreen },
               orderdetail: { screen: OrderDetailScreen }
             })
           }
     },
     {
       tabBarPosition: 'bottom',
       lazy: true,
       tabBarOptions: {
         labelStyle: { fontSize: 12 }
       }
     })
   }
  },
  {
   navigationOptions: {
    tabBarVisible: false
  },
  tabBarPosition: 'bottom',
  swipeEnabled: false,
  lazy: true,
  animationEnabled: false,
  //backBehavior: 'none',
  });
  </code></pre>
  
  <p>and inside my orderlist</p>
  
  <pre><code>    static navigationOptions = ({ navigation }) =&gt; ({
        title: 'Orders',
        headerRight: (
          &lt;Button
            title="Settings"
            onPress={() =&gt; navigation.navigate('settings')}
            backgroundColor="rgba(0,0,0,0)"
            color="rgba(0,122,255,1)"
          /&gt;
        ),
        headerStyle: { marginTop: Platform.OS === 'android' ? 20 : 0 },
        tabBarIcon: ({ tintColor }) =&gt; {
        return &lt;Icon name="favorite" size={30} color={tintColor} /&gt;;
       }
    })
  </code></pre>
  
  <p>But my tab and header name is same, i.e. <code>Orders</code>, How can I have different name for tab and header?</p>