createValue: (
      init,
      key,
      props,
      { passiveParent, passiveProps, passiveParentKey }: CreateValueProps = {}
    ) => {
      if (passiveParent) {
        if (!nonLayoutValues.has(key)) {
          passiveParent.useNativeDriver = props.useNativeDriver = false;
          warning(
            false,
            `useNativeDriver is invalidated on value "${passiveParentKey}", because interpolated value "${key}" can't be animated by the native driver.`
          );
        }
        return {
          interpolation: passiveParent.raw.interpolate(passiveProps)
        };
      } else {
        let needsInterpolation = false;
        let unit = '';
        let initValue = 0;

        if (typeof init === 'string') {
          unit = getUnit(init);
          initValue = parseFloat(init);

          if (unitConverters[unit]) {
            initValue = convertUnitToPoints(init);
          } else {
            needsInterpolation = true;
          }
        } else {
          initValue = init;
        }

        const value: Value = {
          raw: new Animated.Value(initValue),
          useNativeDriver: nonLayoutValues.has(key)
        };

        if (needsInterpolation) {
          value.interpolation = value.raw.interpolate({
            inputRange: [0, 1],
            outputRange: [`0${unit}`, `1${unit}`]
          });
        }

        return value;
      }
    },

  getProps: (poser, { draggable }, { onDragStart, onDragEnd }) => {
    if (!draggable) return {};

    warning(
      false,
      'draggable: true disables useNativeDriver for this component.'
    );

    const values = poser.get();
    const dragX = draggable === true || draggable === 'x';
    const dragY = draggable === true || draggable === 'y';

    const panResponder = PanResponder.create({
      onMoveShouldSetPanResponderCapture: () => true,
      onPanResponderMove: Animated.event([
        null,
        {
          dx: dragX ? values.x : null,
          dy: dragY ? values.y : null
        }
      ]),
      onPanResponderGrant: (e, gestureState) => {
        if (dragX) {
          values.x.setOffset(values.x._value);
          values.x.setValue(0);
        }

        if (dragY) {
          values.y.setOffset(values.y._value);
          values.y.setValue(0);
        }

        if (onDragStart) onDragStart(e, gestureState);
        poser.set('dragging', { gestureState });
      },
      onPanResponderRelease: (e, gestureState) => {
        if (onDragEnd) onDragEnd(e, gestureState);
        if (dragX) values.x.flattenOffset();
        if (dragY) values.y.flattenOffset();
        poser.set('dragEnd', { gestureState });
      }
    });

    return panResponder.panHandlers;
  }

const svg = (element: HTMLElement, props: Object): Styler => {
  warning(false, 'svg() is deprecated, use styler instead');
  return styler(element, props);
};

const handleTransition = (
  {
    children: incomingChildren,
    preEnterPose,
    enterPose,
    exitPose,
    animateOnMount,
    enterAfterExit,
    flipMove,
    onRest,
    ...propsForChildren
  }: Props,
  {
    displayedChildren,
    finishedLeaving,
    hasInitialized,
    indexedChildren,
    scheduleChildRemoval
  }: State
) => {
  const targetChildren = makeChildList(incomingChildren as React.ReactNode);

  const nextState: Partial<State> = {
    displayedChildren: []
  };

  if (process.env.NODE_ENV !== 'production') {
    warning(
      !propsForChildren.onPoseComplete,
      "<Transition/> (or <PoseGroup/>) doesn't accept onPoseComplete prop."
    );
  }

  const prevKeys = displayedChildren.map(getKey);
  const nextKeys = targetChildren.map(getKey);

  const hasPropsForChildren = Object.keys(propsForChildren).length !== 0;

  const entering = new Set(
    nextKeys.filter(
      key => finishedLeaving.hasOwnProperty(key) || prevKeys.indexOf(key) === -1
    )
  );
  entering.forEach(key => delete finishedLeaving[key]);

  const leaving: string[] = [];
  const newlyLeaving: { [key: string]: boolean } = {};
  prevKeys.forEach(key => {
    if (entering.has(key)) {
      return;
    }

    const isLeaving = finishedLeaving.hasOwnProperty(key);

    if (!isLeaving && nextKeys.indexOf(key) !== -1) {
      return;
    }

    leaving.push(key);

    if (!isLeaving) {
      finishedLeaving[key] = false;
      newlyLeaving[key] = true;
    }
  });

  const moving = new Set(
    prevKeys.filter((key, i) => {
      // if it's not entering or leaving
      return !entering.has(key) || leaving.indexOf(key) === -1;
    })
  );

  targetChildren.forEach(child => {
    const newChildProps: { [key: string]: any } = {};

    if (entering.has(child.key as string)) {
      if (hasInitialized || animateOnMount) {
        newChildProps.initialPose = preEnterPose;
      }
      // TODO: Remove _pose and merge with child.props.pose
      newChildProps._pose = enterPose;
    } else if (moving.has(child.key as string) && flipMove) {
      newChildProps._pose = [enterPose, 'flip'];
    } else {
      newChildProps._pose = enterPose;
    }

    const newChild = React.cloneElement(child, newChildProps);
    indexedChildren[child.key] = newChild;
    nextState.displayedChildren.push(
      hasPropsForChildren ? prependProps(newChild, propsForChildren) : newChild
    );
  });

  leaving.forEach(key => {
    const child = indexedChildren[key];
    const newChild = newlyLeaving[key]
      ? React.cloneElement(child, {
          _pose: exitPose,
//.........这里部分代码省略.........

  getProps: (
    poser,
    { draggable },
    { onDragStart, onDragEnd, flipMove, measureSelf },
    setLayout
  ) => {
    let props: { [key: string]: any } = {};

    if (draggable) {
      warning(
        false,
        'draggable: true disables useNativeDriver for this component.'
      );

      const values = poser.get();
      const dragX = draggable === true || draggable === 'x';
      const dragY = draggable === true || draggable === 'y';

      const panResponder = PanResponder.create({
        onMoveShouldSetPanResponderCapture: () => true,
        onPanResponderMove: Animated.event([
          null,
          {
            dx: dragX ? values.x : null,
            dy: dragY ? values.y : null
          }
        ]),
        onPanResponderGrant: (e, gestureState) => {
          if (dragX) {
            values.x.setOffset(values.x._value);
            values.x.setValue(0);
          }

          if (dragY) {
            values.y.setOffset(values.y._value);
            values.y.setValue(0);
          }

          if (onDragStart) onDragStart(e, gestureState);
          poser.set('dragging', { gestureState });
        },
        onPanResponderRelease: (e, gestureState) => {
          if (onDragEnd) onDragEnd(e, gestureState);
          if (dragX) values.x.flattenOffset();
          if (dragY) values.y.flattenOffset();
          poser.set('dragEnd', { gestureState });
        }
      });

      props = {
        ...props,
        ...panResponder.panHandlers
      };
    }

    if (flipMove || measureSelf) {
      props.onLayout = ({ nativeEvent }: LayoutChangeEvent) =>
        setLayout(nativeEvent.layout);
    }

    return props;
  }