如何使用反应导航获得模态效果？答案

【问题标题】：How to get the Modal effect using react-navigation?如何使用反应导航获得模态效果？
【发布时间】：2019-09-10 05:49:43
【问题描述】：

我正在尝试使用反应导航复制弹出行为（模态）。我能够复制其中的某些部分，但无法生成完整的结果。我必须将 tabBar 放在屏幕的背景中。我不想隐藏它。我正在使用 Navigation，它比 Modal 给了我一些显着的优势。

我尝试过使用tabBarVisible: false，但它完全隐藏了tabBar。我正在使用mode: 'modal' 来获得模态行为，如果在屏幕的空白部分按下，则使用 TouchableHighlight 来关闭模态。我无法像下面附加的图像那样重叠 tabBar。

这是我的代码：


const SpaceTabNavigator = createStackNavigator({
  Spaces: {
    screen: SpacesTab
  },
  applianceList: AppliancesList,
  applianceConfig: ApplianceConfig
},
{
  initialRouteName: 'Spaces',
  headerMode: 'none',
  navigationOptions: {
      headerVisible: false,
  },
  mode: 'modal',
  transparentCard: true,
  cardStyle: {
    opacity: 1
  },
})

const TabNavigator = createBottomTabNavigator({
  Dashboard: {
    screen: HomeTab,
  },
  Spaces: SpaceTabNavigator,
  Moods: MoodStackNavigator,
},
{
  swipeEnabled: true,
  animationEnabled: true
})


const DrawerNavigator = createDrawerNavigator(
  {
    TabNav: TabNavigator
  },
  {
    contentComponent: Drawer
  }
);

你能建议一个解决方法吗？

这是我已经取得的结果：The achieved Result

这是我想要的结果：This is the result I want

【问题讨论】：

标签： react-native react-native-android react-navigation react-modal

【解决方案1】：

步骤 - 1：使用模态框的“透明”道具使模态框透明。

步骤 - 2：将模态边距底部设为 50 以将其呈现在标签栏上方。

这样就可以了

【讨论】：

感谢您的回答，但这是一个带导航的新屏幕。这可以在屏幕中覆盖 tabBar 吗？
我不这么认为。为什么不使用模态。
因为该屏幕上有多个调用，其中一些对应于某些特定参数。如果我使用模态，我必须弄清楚按下哪个按钮来触发该模态。幸运的是，您可以在导航中传递参数，这使我更容易控制这些调用。