ReactNative实现宽度变化实现的动画效果

效果如上图所示，通过修改设备宽度实现动画效果

import React, {useRef, useEffect, useState} from 'react';
import {Animated, Text, View, Image} from 'react-native';

const FadeInView = props => {
  const fadeAnim = useRef(new Animated.Value(0)).current;

  React.useEffect(() => {
    Animated.timing(
      fadeAnim, // 动画中的变量值
      {
        toValue: props.currentWidth, // 
        duration: props.durationTime, // 让动画持续一段时间
        //  Style property 'width' is not supported by native animated module
        useNativeDriver: false,
      },
    ).start(); // 开始执行动画
  }, [props.currentWidth]);

  return (
    
   
    
  );
};

// 然后你就可以在组件中像使用`View`那样去使用`FadeInView`了
export default props => {
  return (
    
  );
};

使用的代码如下

PS：注意上面的代码和截图不一致；但是代码是可以实现上面的效果的。