mh-rn-component/module/Switch/index.js

import React, { useEffect } from 'react';
import { View, Animated, TouchableWithoutFeedback, Easing, StyleSheet } from 'react-native';

const Switch = _ref => {
  let {
    size = 30,
    checked = false,
    activeColor = "#0f59a4",
    inactiveColor = "#dcdee0",
    ...rest
  } = _ref;
  const move = new Animated.Value(0);

  const click = () => {
    rest.onChange(!checked);
  };

  const moveInterpolate = move.interpolate({
    inputRange: [0, size],
    outputRange: [inactiveColor, activeColor]
  });
  useEffect(() => {
    if (checked) {
      Animated.timing(move, {
        toValue: size,
        duration: 300,
        useNativeDriver: false,
        easing: Easing.elastic(0.5)
      }).start(() => {
        !checked ? move.setValue(0) : move.setValue(size);
      });
    } else {
      move.setValue(size);
      Animated.timing(move, {
        toValue: 0,
        duration: 300,
        useNativeDriver: false,
        easing: Easing.elastic(0.5)
      }).start(() => {
        !checked ? move.setValue(0) : move.setValue(size);
      });
    }
  }, [checked]);
  return /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
    disabled: rest === null || rest === void 0 ? void 0 : rest.disabled,
    onPress: click
  }, /*#__PURE__*/React.createElement(Animated.View, {
    style: [styles.switch, {
      width: size * 2,
      height: size,
      borderRadius: size / 2,
      backgroundColor: moveInterpolate,
      borderColor: moveInterpolate
    }]
  }, /*#__PURE__*/React.createElement(Animated.View, {
    style: {
      transform: [{
        translateX: move
      }]
    }
  }, /*#__PURE__*/React.createElement(View, {
    style: [styles.switch_node, {
      width: size - 1,
      height: size - 1,
      borderRadius: size / 2
    }]
  }))));
};

const styles = StyleSheet.create({
  switch: {
    justifyContent: "center",
    borderWidth: 1
  },
  switch_node: {
    backgroundColor: "#fff"
  }
}); // todo 是否需要调整react.memo带来的性能影响，主要用来处理重新渲染

export default /*#__PURE__*/React.memo(Switch);
//# sourceMappingURL=index.js.map