Question

我正在尝试使用react-navigation复制Popup行为（模态）。我可以复制其中的某些部分，但无法生成完整的结果。我必须将tabBar放在屏幕的背景中。我不想隐藏它。我正在使用导航，它比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

Answer 1

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

第2步：将模态边距的底部设为50，以使其在选项卡栏上方呈现。

这应该做

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

1 个答案: