带标题/后退按钮的反应导航模式

Question

实现社交网络，我有“提要”屏幕、“发帖”屏幕和“撰写”屏幕

我需要能够在“摘要”和“帖子”页面上来回导航，以便它们位于同一堆栈中。

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

目前的实现是这样的：

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

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

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模态将有一个。

Answer 2

试试这个代码。现在发生的情况是，现在已指定自定义标题左侧按钮，以便您可以Post从模式导航回例如。您可以Go Back使用您选择的库中的后退箭头图标进行替换。

const MainStack = new StackNavigator({
    Feed: { screen: Feed },
    Post: { screen: Post }
}, {
    headerMode: "screen",
    modal: "card"
});

const ComposeStack = new StackNavigator({
    Compose: { 
      screen: Compose, 
      navigationOptions: ({navigation}) => ({ 
        headerLeft: 
          <TouchableOpacity onPress={()=>{navigation.navigate('Post')}}>
            <Text>Go Back</Text>
          </TouchableOpacity> 
      })
    },    
} );

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