React 导航标题如何正确显示

Question

考虑以下导航堆栈代码：

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"
  }
});

Test2.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"
  }
});

我得到以下信息：

1. 我的 TEST1 视图显示时没有标题：

2. 我的 TEST2 视图与标题一起出现，但顶部有很多填充（填充正常吗？我怎样才能减少它？）

Answer 1

您可以通过在

headerStyle

中设置

navigationOptions

的样式来设置标题样式。

static navigationOptions = ({
   title: "TEST 1 TITLE", 
   headerStyle: {{ height: 50 }}
});