react-navigation 如何实现页面切换时显示页面边框毛玻璃阴影？

Question

如下图的效果：(图片来源网络)

请问使用 react-navigation 如何实现这种效果？

Answer 1

从 react navigation version >= 4.x 起 官方提供了如下方法配置你自定义的转场（导航） 效果：

• cardStyleInterpolator - 为插卡（标题栏下面的区域）的各个部分指定插值样式。这使您可以自定义在屏幕之间导航时的过渡。期望至少返回空对象，其中可能包含容器的插值样式，卡片本身，覆盖和阴影。支持的属性是：

  • containerStyle -包装卡的容器视图的样式。
  • cardStyle -代表卡的视图的样式。
  • overlayStyle -表示下面的半透明叠加层的视图样式
  • shadowStyle -表示卡片阴影的视图样式。
• gestureDirection -滑动手势的方向

• transitionSpec-指定动画类型（timing或spring）及其选项（例如durationfor timing）的对象。它具有2个属性：

  • open -添加屏幕时的过渡配置
  • close -删除屏幕时过渡的配置。

通过配置这3个option可以满足你的使用，唯一的缺点是毛玻璃效果可能不能还原很好，因为RN阴影属性只支持IOS
具体配置以及demo请见官方文档：https://reactnavigation.org/docs/stack-navigator/#animation-related-options