在stacknavigator中更改tabnavigator的标题

Question

我有以下设置。我的MainNavigator是StackNavigator。

const MainNavigator = createStackNavigator(
  {
    Tabs: {
      screen: BottomTabNavigator,
    },
  },
  {
    initialRouteName: 'Tabs',
    defaultNavigationOptions: {
      title: 'Main title',
    },
  },
);

因此，默认情况下，这会将headerTitle设置为主要标题，该设置可以正常工作。在此StackNavigator中，我有一个TabNavigator：

const BottomTabNavigator = createBottomTabNavigator(
  {
    DashboardTab: {
      screen: Dashboard,
      navigationOptions: () => ({
        tabBarLabel: 'Dashboard',
        title: 'Dashboard 2',
        headerTitle: 'Dashboard 2',
      }),
    },
    OverviewTab: {
      screen: OverviewTabNavigator,
      navigationOptions: () => ({
        tabBarLabel: 'Overview',
        title: 'Overview 1',
        headerTitle: 'Overview 2',
      }),
    },
  },
  {
    initialRouteName: 'DashboardTab',
  },
);

export default BottomTabNavigator;

我正在尝试使用此组件覆盖默认标题。但这似乎不起作用。

我还尝试通过使用静态navigationOptions在组件本身中覆盖它：

class Dashboard extends React.Component {
  static navigationOptions = {
    title: 'Dashboard 3',
    headerTitle: 'Dashboard 3',
  };

  render() {
    return (
      <DashboardContainer>
        <Text>{instructions}</Text>
      </DashboardContainer>
    );
  }
}

但是这也不起作用。。我有误会吗？它总是一直显示主标题。同样，在文档中也找不到带有标题示例的此类嵌套导航的有用信息。