24jieqi / react-native-xiaoshu

🌈 React Native UI library
https://24jieqi.github.io/react-native-xiaoshu/
Apache License 2.0
234 stars 23 forks source link

Toast.loading能否支持自定义图标 #71

Closed YuGer26 closed 1 month ago

YuGer26 commented 1 month ago

尝试了一下使用icon api,但是没用,能否支持修改使用图标旋转或者直接可以替换gif

onlyling commented 1 month ago

Toast.loading 只是 Toast 一个快捷 API,可以使用如下方式。

从实现的角度,Toast.loading 自带的 type 可以被外部传入的覆盖,代码

const CustomLoading = ({
  size,
  color,
}: {
  size: number
  color: ColorValue
}) => {
  const spin = useRef(new Animated.Value(0))

  useEffect(() => {
    const spinAnimation = Animated.timing(spin.current, {
      toValue: 1,
      duration: 300,
      useNativeDriver: true,
    })

    Animated.loop(spinAnimation).start()
  }, [])

  return (
    <Animated.View
      style={{
        width: size,
        height: size,
        alignContent: 'center',
        justifyContent: 'center',
        transform: [
          {
            rotateZ: spin.current.interpolate({
              inputRange: [0, 1],
              outputRange: ['0deg', '360deg'],
            }),
          },
        ],
      }}>
      <DoubleArrowClockwiseOutline size={size} color={color} />
    </Animated.View>
  )
}
Toast({
  message: '提示内容',
  type: 'icon',
  icon: <CustomLoading size={24} color="#098" />,
})