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

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

import React, {useRef, useEffect, useState} from 'react';
import {Animated, Text, View, Image} from 'rea服务器托管网ct-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 (
    {
        ...props.style,
        width: fadeAnim, // 将宽度绑定到动画变量值
      }}>
   
    
  );
};

// 然后你就可以在组件中像使用`View`那样去使用`FadeInView`了
export default props =服务器托管网> {
  return (
    {height: 310, backgroundColor: 'pink'}}>
  );
};

使用的代码如下

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

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 在数据库造数据发现的bug也是bug

上个月，我和开发小哥讨论过一个问题，开发小哥专门提醒我，页面上新增功能尽可能在前端造一些数据去测试，如果直接从数据库里插入的数据，定位问题还是有些说不清楚。 讨论的过程和细节就是以下的对话内容： 测试小姐姐: 企业设备翻页查询的时候报这个错了？@开发小哥 In…