React native 使用收割台/后退按钮响应导航模式

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

---

任何帮助都将不胜感激

试试这段代码。发生的情况是，现在已经指定了一个自定义标题左按钮，以便您能够从模式导航回例如

Post

。您可以使用所选库中的返回箭头图标替换

返回

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

const-MainStack=new-StackNavigator({
提要：{屏幕：提要}，
Post:{屏幕：Post}
}, {
headerMode:“屏幕”，
模态：“卡片”
});
const ComposeStack=新堆栈导航器({
组成：{
屏幕：撰写，
导航选项：（{navigation}）=>（{
左校长：
{navigation.navigate（'Post'）}>
回去
})
},    
} );
export const Navigation=StackNavigator({
MainStack:{屏幕：MainStack}，
ComposeStack:{屏幕：ComposeStack}，
},
{ 
headerMode:“无”，mode:“模态”
});

我最终手动放置了react navigation的内部标题组件，如前所述

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

如果有人知道的话，我还是会选择更好的方式

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

从“反应导航/src/views/Header/Header”导入标题；
类ModalScreen扩展了React.Component{
render（）{
返回(
...
（{选项：{
标题：“模态”，
头灯：(
this.props.navigation.goBack（）}
/>
)
}})}
/>
...
);
}
}

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

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

---

使用此设置，

MainStack

将在不带标题的情况下呈现，并且您的

Compose

模式将有一个标题。

只需将模式屏幕转换为

StackNavigator

：

const modalStack=StackNavigator({
模态：{屏幕：模态}
})
export const Navigation=StackNavigator({
应用程序：{屏幕：应用程序}，
模态：{screen:modalStack}，
}, {
模式：“模态”，
headerMode:“无”
})

要从模式返回应用程序，请执行以下操作：

功能手柄按钮按下（）{
navigation.goBack（空）
}

在第一个备选方案中，尝试将headerMode设置为“屏幕”，以便显示标题。如果有，请告诉我！感谢将导航器堆栈头模式更改为“屏幕”的响应，创建了两个导航头-一个用于导航堆栈，一个用于主堆栈-删除主堆栈头意味着我无法在A和BOk之间导航经过思考后，您应该采取类似于第二个备选方案的方法。请问您是如何导航到模式屏幕

C

并远离它的？还有，你见过这个官方的例子吗？感谢一个例子是一个社交网络应用程序：a是提要，B是一个你来回导航的帖子页面C是新的帖子页面-它会弹出一个模式，你可以关闭它返回到a&B堆栈。这个例子很好，只是没有导航头指向ModalTanks，但这样会失去从a到B再通过导航头返回的导航。（现在改名为Feed，Post）@Ian.mc我已经更新了我的答案。试着看看它是否适用于您的用例再次感谢您的时间。这看起来更好，但我不确定我是否应该使用它：1。从撰写导航到发布时，撰写屏幕将保留在状态堆栈中，而不是返回到发布，并在顶部添加一个新的主堆栈。可以注意到的是，Post屏幕从底部向上滑动，添加了一个新的堆栈，而不是Compose屏幕从顶部向下滑动，显示了以前的堆栈2。这意味着，如果用户在MainStack中进行了一些导航，例如Feed=>Post1=>User1=>Post2=>Compose=>Post2，他将无法导航回原始历史记录