react-native - 带有标题/后退按钮的 react 导航模式

Question

实现一个社交网络，我有 Feed 屏幕、一个 Post 屏幕和一个 Compose 屏幕

我需要能够在 Feed 和 Post 页面上来回导航，因此它们在同一个堆栈中。

Compose 屏幕需要作为带有单独导航栏的模型弹出。

目前的实现是这样的:

const MainStack = new StackNavigator({
    Feed: { screen: Feed },
    Post: { screen: Post },
});

我尝试了两种选择:

将撰写屏幕添加到主导航器
=> 没有标题，即使覆盖导航选项:

export const Navigation = StackNavigator(
  {
    MainStack: { screen: MainStack },
    Compose: { screen: Compose, navigationOptions: { headerMode: "screen" } },
  },
  { headerMode: "none", mode: "modal" }
);

将 Compose 屏幕放在单独的堆栈中 => 我们得到一个带有后退按钮的标题，但按下它不会返回主堆栈

const ComposeStack = new StackNavigator({
    Compose: { screen: Compose },    
});

export const Navigation = StackNavigator(
  {
    MainStack: { screen: MainStack },
    ComposeStack: { screen: ComposeStack },
  },
  { headerMode: "none", mode: "modal" }
);

任何帮助将不胜感激!

Answer 1

如果您按以下方式设置堆栈导航，则无需在模态屏幕上手动设置标题即可执行此操作:

export const Navigation = StackNavigator({
  MainStack: { 
    screen: MainStack,
    navigationOptions: { header: null },
  },
  Compose: { 
    screen: Compose,
  },
}, {
  mode: "modal",
});

使用此设置， MainStack将在没有标题和您的 Compose 的情况下呈现模态会有一个。