React Navigation源代码阅读：views/CardStack/Card.js_react navigator routeconfigmap 报错-优快云博客

本文介绍了一个用于模拟卡片栈效果的React组件Card的设计与实现细节。该组件通过使用Animated.View来支持动画效果，并通过创建一个增强容器来动态调整每个卡片的交互属性，实现了类似卡片堆叠的视觉效果。

import React from 'react';
import { Animated, StyleSheet } from 'react-native';
import createPointerEventsContainer from './PointerEventsContainer';

/**
 * 定义一个React Component Card，这个组件会被 CardStack(卡片栈，后进先出)
 * 用来渲染 * 每个屏幕(场景)，让每个屏幕(场景)的表现类似于我们常见的卡片
 */
class Card extends React.Component {
  render() {
    const { children, pointerEvents, style } = this.props;
    return (
      <Animated.View
        pointerEvents={pointerEvents}
        ref={this.props.onComponentRef}
        style={[styles.main, style]}
      >
        {children}
      </Animated.View>
    );
  }
}

// 注意这里缺省的Card样式定义，采用了绝对定位，并且上下左右边距都是0(表明要占满容器可用区域),
// 这种样式定义是有目的的，其目的是，CardStack中所有的Card都会被渲染出来，按照其索引从小到
// 大的顺序渲染，而采用这种样式定义，这些卡片就像是z轴方向堆叠到了一起，这正是我们想要的效果。
const styles = StyleSheet.create({
  main: {
    backgroundColor: '#EFEFF4',
    bottom: 0,
    left: 0,
    position: 'absolute',
    right: 0,
    shadowColor: 'black',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.2,
    shadowRadius: 5,
    top: 0,
  },
});

/**
 * 本文件并不直接导出上面定义的卡片组件，而是使用以下HOC对其进行
 * 相应的增强，然后向外导出增强后的组件，仍然称其为Card，卡片组件。
 * 不过其实现在它已经是一个容器组件内套了上面的一个卡片组件，
 * 并且在导航位置(navigation position)发生变化时,上面的卡片组件
 * 的 pointerEvents 属性会被重新计算和设置
 */
Card = createPointerEventsContainer(Card);

export default Card;