@td-design/react-native/lib/module/image-header/AnimateHeader.js

react-native UI组件库

import React from 'react';
import { StyleSheet } from 'react-native';
import Animated, { Extrapolate, interpolate, interpolateColor, useAnimatedStyle } from 'react-native-reanimated';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useTheme } from '@shopify/restyle';
import Box from '../box';
import Flex from '../flex';
import helpers from '../helpers';
import Pressable from '../pressable';
import SvgIcon from '../svg-icon';
import Text from '../text';
const {
  px,
  ONE_PIXEL,
  deviceWidth
} = helpers;
const HEADER_HEIGHT = px(44);
const AnimateHeader = props => {
  const theme = useTheme();
  const insets = useSafeAreaInsets();
  const {
    scrollY,
    headerTitle,
    headerTitleStyle,
    scrollHeight = 300,
    onPress,
    showLeft = true,
    headerRight,
    headerLeftColor = theme.colors.text,
    headerLeft,
    headerBackgroundColor = theme.colors.white,
    activeOpacity = 0.6
  } = props;
  const inputRange = [0, scrollHeight];
  const style = useAnimatedStyle(() => {
    const opacity = interpolate(scrollY.value, inputRange, [0, 1], Extrapolate.CLAMP);
    const borderBottomWidth = interpolate(scrollY.value, inputRange, [0, ONE_PIXEL], Extrapolate.CLAMP);
    const backgroundColor = interpolateColor(scrollY.value, inputRange, ['transparent', headerBackgroundColor]);
    return {
      borderBottomWidth,
      backgroundColor,
      opacity
    };
  });
  const styles = StyleSheet.create({
    header: {
      width: deviceWidth,
      position: 'absolute',
      top: 0,
      zIndex: 99,
      justifyContent: 'center',
      alignItems: 'center',
      borderBottomColor: theme.colors.border,
      paddingTop: insets.top,
      height: HEADER_HEIGHT + insets.top
    }
  });
  return /*#__PURE__*/React.createElement(Animated.View, {
    style: [styles.header, style]
  }, /*#__PURE__*/React.createElement(Flex, {
    flex: 1
  }, showLeft ? /*#__PURE__*/React.createElement(Pressable, {
    activeOpacity: activeOpacity,
    onPress: onPress,
    style: {
      flex: 1
    }
  }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(SvgIcon, {
    name: "left",
    size: px(24),
    color: headerLeftColor
  }), typeof headerLeft === 'string' ? /*#__PURE__*/React.createElement(Text, {
    variant: "p0",
    style: {
      color: headerLeftColor
    }
  }, headerLeft) : headerLeft)) : /*#__PURE__*/React.createElement(Box, {
    flex: 1
  }), /*#__PURE__*/React.createElement(Animated.View, {
    style: {
      flex: 5,
      alignItems: 'center'
    }
  }, /*#__PURE__*/React.createElement(Text, {
    variant: "h1",
    color: "text",
    numberOfLines: 1,
    style: headerTitleStyle
  }, headerTitle)), /*#__PURE__*/React.createElement(Box, {
    flex: 1,
    alignItems: "flex-end"
  }, headerRight)));
};
AnimateHeader.displayName = 'AnimateHeader';
export default AnimateHeader;
//# sourceMappingURL=AnimateHeader.js.map