FadeInView.js

最新推荐文章于 2020-11-16 10:22:59 发布

rimuweinuan_

最新推荐文章于 2020-11-16 10:22:59 发布

阅读量242

点赞数

分类专栏： React Native

React Native 专栏收录该内容

1 篇文章

订阅专栏

// FadeInView.js
import React, { Component } from 'react';
import {
  Animated,
} from 'react-native';

class FadeInView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fadeAnim: new Animated.Value(0),          // 透明度初始值设为0
    };
  }
  componentDidMount() {
    Animated.timing(                            // 随时间变化而执行的动画类型
      this.state.fadeAnim,                      // 动画中的变量值
      {
        toValue: 1,                             // 透明度最终变为1，即完全不透明
        duration:5000                           // 渐变时间：5s 
      }
    ).start();                                  // 开始执行动画
  }
  render() {
    return (
      <Animated.View                            // 可动画化的视图组件
        style={{
          ...this.props.style,
          opacity: this.state.fadeAnim,          // 将透明度指定为动画变量值
        }}
      >
        {this.props.children}
      </Animated.View>
    );
  }
}
//暴露组件
module.exports = FadeInView;

使用：

import FadeInView from './FadeInView';
...
export default class xxx extends Component {
  render() {
    return (
		<FadeInView style={{width: 250, height: 50, backgroundColor: 'powderblue'}}>
			<Text style={{fontSize: 28, textAlign: 'center', margin: 10}}>Fading in</Text>
		</FadeInView>
    )
  }
}