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

【问题标题】：react-navigation modal with header/back button带有标题/后退按钮的反应导航模式
【发布时间】：2018-12-18 10:09:05
【问题描述】：

实现一个社交网络，我有 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" }
);

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

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

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

任何帮助将不胜感激！

【问题讨论】：

在您的第一个选择中，尝试将 headerMode 设置为 'screen' 以便出现标题。如果有，请告诉我！
感谢将 Navigator 堆栈标题模式更改为“屏幕”的响应创建 2 个导航标题 - 一个用于导航堆栈，一个用于 MainStack - 删除 MainStack 的标题意味着我无法在 A 和 B 之间导航
好吧，在考虑之后，您应该采用类似于您的第二个替代方案的方法。请问您是如何导航到模态屏幕C 并远离它的？另外，你看过这个官方的例子吗？ reactnavigation.org/docs/en/modal.html
谢谢一个例子是一个社交网络应用程序：A 是 Feed，B 是一个帖子页面，您可以来回导航 C 是新帖子页面 - 它作为一个模态弹出，您可以靠近回到 A&B 堆栈示例很好，只是模式没有导航标题

标签： react-native react-navigation

【解决方案1】：

试试这个代码。发生的情况是，现在已经指定了一个自定义标题左按钮，以便您能够导航回例如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" 
});

【讨论】：

谢谢，但是这种方式会丢失从 A 到 B 并通过导航标题返回的导航。（现在更名为 Feed、Post）
@Ian.mc 我已经更新了我的答案。试试看它是否适用于您的用例
再次感谢您的宝贵时间。这看起来更好，但我不确定我应该使用它： 1. 当从 Compose 导航到 Post 时，而不是返回 Post，Compose 屏幕保留在状态堆栈中，并在顶部添加一个新的 MainStack。很明显 - Post 屏幕从底部向上滑动添加一个新堆栈，而不是 Compose 屏幕从顶部向下滑动，显示上一个堆栈 2。这意味着如果用户在 MainStack 中进行了一些导航，例如Feed => Post1 => User1 => Post2 => Compose => Post2，他将无法返回原始历史记录

【解决方案2】：

我最终手动放置了 react-navigation 的内部 Header 组件，如 here 所述。

绝对不是一个完美的解决方案，但它确实有效。

如果有人知道，我仍然会选择更好的方法。

import Header from 'react-navigation/src/views/Header/Header';

class ModalScreen extends React.Component {
  render() {
   return (
     ...
     <Header scene={{index: 0}}
             scenes={[{index: 0, isActive: true}]}
             navigation={{state: {index: 0}}}
             getScreenDetails={() => ({options: {
                title: 'Modal',
                headerRight: (
                  <Button 
                     title="Close" 
                     onPress={() => this.props.navigation.goBack()}
                  />
                )
             }})}
     />
     ...
   );
  }
}

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

只需将模态屏幕变成StackNavigator：

const modalStack = StackNavigator({
  Modal: { screen: Modal }
})

export const Navigation = StackNavigator({
  App: { screen: App },
  Modal: { screen: modalStack },
}, {
  mode: 'modal',
  headerMode: 'none'
})

从模态返回应用程序：

function handleBackButtonPressed() {
  navigation.goBack(null)
}

【讨论】：