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

Implementing a social network, I have the Feed screen, a Post screen and a Compose screen

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

I need to be able to navigate back and forth on the Feed and Post pages, so they're in the same stack.

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

The Compose screen needs to be popped up as a model with a separate navbar.

需要将“撰写”屏幕弹出为具有单独导航栏的模型。

The current implementation is this:

目前的实施是这样的：

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

I tried two alternatives:

我尝试了两种选择：

Adding the compose screen to the main navigator => there's no header, even when overriding navigation options:

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

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

Placing Compose screen in a separate stack => we get a header with a back button, but pressing it doesn't go back to the main stack

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

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

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

Any help would be greatly appreciated!

任何帮助将不胜感激！

2 个解决方案

#1

Try this code. What happens is that now a custom header left button has been specified so that you are able to navigate back to e.g. Post from the modal. You can replace Go Back with a back-arrow icon from a library of your choice.

试试这个代码。现在发生的是，现在已经指定了自定义标题左侧按钮，以便您能够导航回到例如从模态发布。您可以使用所选库中的后退箭头图标替换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" 
});

#2

I ended up manually placing react-navigation's internal Header component as described here.

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

Definitely not a perfect solution, but it works.

绝对不是一个完美的解决方案，但它的工作原理。

Would still prefer a better way if somebody knows one.

如果有人知道的话，仍然会更喜欢更好的方式。

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()}
                  />
                )
             }})}
     />
     ...
   );
  }
}