如何在 React Navigation 中创建屏幕下推答案

【问题标题】：How to create a push down of screens in React Navigation如何在 React Navigation 中创建屏幕下推
【发布时间】：2018-03-27 23:43:48
【问题描述】：

是否可以向下推整个导航屏幕，包括标题？我需要按下我的屏幕，如下图所示。不知道从哪里开始完成这项工作。我需要将整个导航嵌套在另一个容器中吗？

【问题讨论】：

标签： android ios reactjs react-native react-navigation

【解决方案1】：

是的，您可以使用另一个组件（例如 <View>）来包装您的导航器并为其设置样式。也许它有一些更好的解决方案，但包装很好，我以前做过。

【讨论】：

你有什么例子说明你是怎么做到的吗？我假设您将其中一个堆栈包装在视图中？

【解决方案2】：

有一个内置选项 - 您需要将 mode: 'modal' 设置为堆栈导航器，例如：

const MainStack = initialRouteName =>
  StackNavigator(
    {
...
    },
    {
      ...navStyles,
      initialRouteName,
      mode: 'modal',
    }
  );

请注意，这只会对 ios 产生影响，因为这种模式在 android 上不存在

【讨论】：

我将堆栈设置为模态只是不清楚如何将这个堆栈向下推。 const NestedHomecreens = StackNavigator({ Home: { screen: Home, }, Notifications: { screen: Notifications, } }, { headerMode: 'none', mode: 'modal', cardStyle: { backgroundColor: 'rgba(0,0,0,0.5)', }, })