Dingdong_client/components/Choose.js

import * as React from 'react';
import { Animated } from 'react-native';
import { Div, Button, Image, Text, Tag, Icon } from 'react-native-magnus';
import { useAnimation } from 'react-native-animation-hooks';

import SvgIcon from './SvgIcon';

const map = new Map([
  [
    'bad',
    {
      name: '非常差',
    },
  ],
  [
    'normal',
    {
      name: '一般',
    },
  ],
  [
    'good',
    {
      name: '超赞',
    },
  ],
]);

export default function Choose(props) {
  const { chooseValue, changeValue } = props;

  const badOpacity = useAnimation({
    type: 'timing',
    initialValue: 1,
    duration: 100,
    toValue: chooseValue && chooseValue !== 'bad' ? 0 : 1,
  });
  const normalOpacity = useAnimation({
    type: 'timing',
    initialValue: 1,
    duration: 100,
    toValue: chooseValue && chooseValue !== 'normal' ? 0 : 1,
  });
  const goodOpacity = useAnimation({
    type: 'timing',
    initialValue: 1,
    duration: 100,
    toValue: chooseValue && chooseValue !== 'good' ? 0 : 1,
  });
  const chooseStyle = {
    position: 'absolute',
    left: '50%',
    transform: [{ translateX: 0 - 53 / 2 }],
    top: 12,
  };
  return (
    <Div>
      <Div row justifyContent="space-around" py={12} px={15}>
        <Animated.View
          style={[
            {
              opacity: badOpacity,
            },
            chooseValue === 'bad' && chooseStyle,
          ]}
        >
          <Button
            bg="hide"
            disabled={chooseValue}
            onPress={() => changeValue('bad')}
          >
            <Div alignItems="center">
              <SvgIcon name="bestBad" width={53} height={53} />
              {!chooseValue && (
                <Text color="gray500" mt={10} fontSize="xs">
                  非常差
                </Text>
              )}
            </Div>
          </Button>
        </Animated.View>
        <Animated.View
          style={[
            {
              opacity: normalOpacity,
            },
            chooseValue === 'normal' && chooseStyle,
          ]}
        >
          <Button
            bg="hide"
            disabled={chooseValue}
            onPress={() => changeValue('normal')}
          >
            <Div alignItems="center">
              <SvgIcon name="normal" width={53} height={53} />
              {!chooseValue && (
                <Text color="gray500" mt={10} fontSize="xs">
                  一般
                </Text>
              )}
            </Div>
          </Button>
        </Animated.View>
        <Animated.View
          style={[
            {
              opacity: goodOpacity,
            },
            chooseValue === 'good' && chooseStyle,
          ]}
        >
          <Button
            bg="hide"
            disabled={chooseValue}
            onPress={() => changeValue('good')}
          >
            <Div alignItems="center">
              <SvgIcon name="veryGood" width={53} height={53} />
              {!chooseValue && (
                <Text color="gray500" mt={10} fontSize="xs">
                  超赞
                </Text>
              )}
            </Div>
          </Button>
        </Animated.View>
      </Div>
      <Div alignItems="center">
        <Div>
          {!!chooseValue && (
            <Tag
              suffix={<Icon name="close" color="black700" fontSize="caption" />}
              color="brand500"
              onPress={() => changeValue('')}
            >
              当前已选择：{map.get(chooseValue).name}
            </Tag>
          )}
        </Div>
      </Div>
    </Div>
  );
}