12-2 RN之导航器页面的全屏模式

在前面的章节中，页面的进入动画都是从右往左，退出时从左往右。然而，在频道详情页面中，页面的动画效果需要从下往上进入。

全屏模式的应用

React Navigation 提供了全屏模式来满足这一需求，允许页面以全屏模式打开。全屏模式与其他页面的主要区别是，当我们从频道页面跳转到详情页时，频道页面依然保持显示，频道详情页会渲染在频道页面的上方。这种效果非常适合临时页面，如登录页或选择页。

配置导航器

为了实现这一功能，我们需要在现有的路由配置中嵌套一个新的 Stack 导航器，并在该导航器上启用全屏模式。

1. 定义最外层的 Stack 导航器：

   首先，声明一个 ModalStackParamList 类型来定义最外层 Stack 导航器中的页面。然后，通过 createStackNavigator 创建新的导航器。

   export type ModalStackParamList = {
    Root: undefined;
    Detail: undefined;
   };
   
   const ModalStack = createStackNavigator<ModalStackParamList>();
   

2. 设置 Modal 导航器：

   在 ModalStackScreen 中，我们启用全屏模式，并设置导航器的标题栏显示模式为 screen，以便在每个页面上都显示标题栏。

   function ModalStackScreen() {
     return (
       <ModalStack.Navigator
         mode="modal"
         headerMode="screen">
         <ModalStack.Screen
           name="Root"
           component={RootStack}
           options={{ headerShown: false }}  // 隐藏 Root 页面标题栏
         />
         <ModalStack.Screen
           name="Detail"
           component={Detail}
         />
       </ModalStack.Navigator>
     );
   }
   

3. 设置动画与手势支持：

   为了确保 iOS 和 Android 上的动画效果一致，并允许通过手势向下滑动关闭页面，我们设置以下选项：

   <ModalStack.Navigator
     mode="modal"
     headerMode="screen"
     screenOptions={() => ({
       ...TransitionPresets.ModalSlideFromBottomIOS,
       gestureEnabled: true,
       headerTitleAlign: 'center',
       headerBackTitleVisible: false,
     })}
   >
   

4. 设置频道详情页面标题栏样式：

   在频道详情页面的 options 中，我们设置标题栏为透明，标题颜色为白色，并自定义页面背景颜色：

   <ModalStack.Screen
     name="Detail"
     component={Detail}
     options={{
       headerTransparent: true,
       headerTitle: '',
       headerTintColor: '#fff',
       cardStyle: { backgroundColor: '#807c66' },
     }}
   />
   

5. 自定义返回按钮：

   我们通过 headerBackImage 选项自定义返回按钮，使用 Icon 组件来设置返回按钮的图标：

   <ModalStack.Screen
     name="Detail"
     component={Detail}
     options={{
       headerBackImage: ({ tintColor }) => (
         <HeaderBackImage color={tintColor} name="icon-down" />
       ),
     }}
   />
   

6. 模拟器效果检查：

   在模拟器上查看效果，确保标题栏样式、动画以及手势控制都按预期工作。

结语

在本节中，我们实现了频道详情页面的全屏模式，并进行了标题栏样式的定制。下一节将重点介绍如何实现音频播放、暂停控制以及进度条控制功能。