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

Question

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

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

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

目前的实施是这样的：

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

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

Answer 3

我最终手动放置了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()}
                  />
                )
             }})}
     />
     ...
   );
  }
}