@td-design/react-native/lib/module/notice-bar/AnimatedNotice.js

react-native UI组件库

import React, { memo, useEffect } from 'react';
import Animated, { Easing, interpolate, runOnJS, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
import { useSafeState } from '@td-design/rn-hooks';
import Box from '../box';
import Flex from '../flex';
import helpers from '../helpers';
import Text from '../text';
const {
  deviceWidth
} = helpers;
const AnimatedNotice = _ref => {
  let {
    icon,
    text,
    textColor,
    animated,
    height,
    onContentLayout,
    duration
  } = _ref;
  const [textWithTail, setTextWithTail] = useSafeState(text);
  useEffect(() => {
    if (animated) {
      text = text.replace(/\s/g, ' ');
      setTextWithTail(text + ' '.repeat(10));
    }
  }, [animated, text]);
  const progress = useSharedValue(0);
  const [textWidth, setTextWidth] = useSafeState(0);
  const startAnimation = () => {
    progress.value = withTiming(1, {
      duration,
      easing: Easing.linear
    }, () => {
      progress.value = 0;
      runOnJS(startAnimation)();
    });
  };
  useEffect(() => {
    animated && startAnimation();
  }, [animated]);
  const animatedStyle = useAnimatedStyle(() => {
    const translateX = interpolate(progress.value, [0, 1], [0, -textWidth]);
    return {
      transform: [{
        translateX
      }]
    };
  });
  return /*#__PURE__*/React.createElement(Flex, {
    justifyContent: 'flex-start',
    alignItems: 'center'
  }, /*#__PURE__*/React.createElement(Box, {
    backgroundColor: "func100",
    height: height,
    zIndex: '99',
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: "x1"
  }, icon), /*#__PURE__*/React.createElement(Flex, {
    width: deviceWidth * 10,
    onLayout: onContentLayout
  }, /*#__PURE__*/React.createElement(Animated.View, {
    style: animatedStyle
  }, /*#__PURE__*/React.createElement(Text, {
    variant: 'p1',
    color: textColor,
    numberOfLines: 1,
    onLayout: e => setTextWidth(e.nativeEvent.layout.width)
  }, textWithTail)), animated && /*#__PURE__*/React.createElement(Animated.View, {
    style: animatedStyle
  }, /*#__PURE__*/React.createElement(Text, {
    variant: 'p1',
    color: textColor,
    numberOfLines: 1
  }, textWithTail))));
};
AnimatedNotice.displayName = 'AnimatedNotice';
export default /*#__PURE__*/memo(AnimatedNotice);
//# sourceMappingURL=AnimatedNotice.js.map