考虑以下导航舱码:

import React, { Component } from "react";
import PropTypes from "prop-types";

import {
  createBottomTabNavigator,
  createSwitchNavigator
} from "react-navigation";

import Icon from "react-native-vector-icons/Ionicons";


import StackedTest from "./StackedTest";
import Test1 from "./Test1";

import { View, StyleSheet } from "react-native";


const LoggedInNavigator = createBottomTabNavigator(
  {
    test: {
      screen: Test1,
      navigationOptions: {
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon
            name={"ios-list-box-outline"}
            size={24}
            color={focused ? tintColor : "#cdcdcd"}
          />
        )
      }
    },
    stacked: {
      screen: StackedTest,
      navigationOptions: {
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon
            name={"ios-list-box-outline"}
            size={24}
            color={focused ? tintColor : "#cdcdcd"}
          />
        )
      }
    },
  },
  {
    tabBarOptions: {
      showLabel: false,
      activeTintColor: "white",
      activeBackgroundColor: "#dedede",
      style: {
        backgroundColor: "#FFFFFF"
      }
    },
    animationEnabled: true,
    swipeEnabled: true
  }
);

export const createRootNavigator = (loggedIn = false) => {
  return createSwitchNavigator(
    {
      LoggedIn: {
        screen: LoggedInNavigator
      }
    }
  );
};

之后:

import React, { Component } from "react";
import PropTypes from "prop-types";

import { createStackNavigator } from "react-navigation";

import Test1 from "./Test2";
import Test2 from "./Test2";


const stackedTest = createStackNavigator(
  {
    Test1: {
      screen: Test1
    },
    Test2: {
      screen: Test2
    }
  },
  {
    navigationOptions: {
      headerStyle: {
        backgroundColor: "#cdcdcd"
      },
      headerTintColor: "#fff",
      headerTitleStyle: {
        fontWeight: "bold"
      }
    }
  }
);

export default stackedTest;

试验1.js

import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";

class Test1 extends Component {
  static navigationOptions = {
    title: "TEST 1 TITLE",
  };

  render = () => {
    return (
      <View style={styles.container}>
        <Text>TEST VIEW 1</Text>
      </View>
    );
  };
}

export default Test1;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }
});

试验2.js

import React, { Component } from "react";
import { View, Text, StyleSheet } from "react-native";

class Test2 extends Component {
  static navigationOptions = {
    title: "TEST 2 TITLE",
  };

  render = () => {
    return (
      <View style={styles.container}>
        <Text>TEST VIEW 2</Text>
      </View>
    );
  };
}

export default Test2;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center"
  }
});

I m getting the following:

1. My TEST1 view appears without the title:

2. My TEST2 view appears with the title, but with a lot of padding on top (is that padding normal? How can I reduce it?)