React Navigation 5组合栈导航、底部标签时如何仅将指定页面设为模态框

问题根源 #

你当前所有页面都呈现模态样式的核心原因是在ExploreStack的Stack.Navigator上全局配置了mode="modal"，该属性会作用于当前栈内所有页面的跳转动画，同时底部标签导航器的mode="modal"属于无效冗余配置，Tab导航器本身不支持该属性。

调整方案 #

React Navigation 5的栈导航mode是全局配置，无法单独为单个页面设置，因此需要去掉全局模态配置，通过TransitionPresets单独为目标页面覆盖转场动画即可实现需求：

1. 删除ExploreStack导航器上的全局mode="modal"配置，默认所有页面使用普通卡片转场
2. 删除BottomTabs导航器上的无效mode="modal"配置
3. 保留LocationStack页面的模态转场配置即可

修改后代码示例 #

BottomTabs 配置

<Tab.Navigator>
  <Tab.Screen
    name={'Home'}
    component={ExploreStack}
    options={{
      tabBarIcon: ({color, size}) => <Icon name="camera" size={25} />,
    }}
  />
  <Tab.Screen
    name={'Post'}
    component={PostScreen}
    options={{
      tabBarIcon: ({color, size}) => <Icon name="camera" size={25} />,
    }}
    listeners={({navigation}) => ({
      tabPress: event => {
        event.preventDefault();
        navigation.navigate('PostStack');
      },
    })}
  />
</Tab.Navigator>

ExploreStack 配置

import { TransitionPresets } from '@react-navigation/stack';

<Stack.Navigator
  screenOptions={{
    headerShown: false,
    // 全局默认使用普通栈导航的右滑转场
    ...TransitionPresets.DefaultTransition
  }}>
  <Stack.Screen name="Explore" component={ExploreScreen} />
  <Stack.Screen name="Modal" component={ModalStack} />
  <Stack.Screen name="ProductDetail" component={ProductDetailScreen} />
  <Stack.Screen
    name="PostStack"
    component={PostStack}
    options={{
      gestureEnabled: false,
    }}
  />
  <Stack.Screen
    name="LocationStack"
    component={LocationStack}
    options={{
      headerMode: 'screen',
      // 仅当前页面使用iOS模态转场
      ...TransitionPresets.ModalPresentationIOS,
      // 如需安卓端也同步模态转场，添加下面一行即可
      ...TransitionPresets.ModalTransition,
      gestureEnabled: true, // 开启iOS侧滑关闭模态手势
    }}
  />
</Stack.Navigator>

调整后仅LocationStack会以从下向上滑的模态样式展示，其余页面保持普通右滑的栈导航效果。

内容的提问来源于stack exchange，提问作者hellomello