欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

react native animated

程序员文章站 2024-01-14 16:30:40
...

一个简单的rn 淡入动画

自定义的component FadeInView

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)
        };
    }
    componentDidMount() {
        Animated
            .timing(this.state.fadeAnim, {
            toValue: 1,
            //5秒
            duration: 5000
        })
            .start();
    }
    render() {
        return (
            <Animated.View
                style={{
                ...this.props.style,
                opacity: this.state.fadeAnim
            }}>
                {this.props.children}
            </Animated.View>
        );
    }
}
//暴露组件
module.exports = FadeInView;

index.android.js 使用FadeInView

import React, {Component} from 'react';
import {
  AppRegistry,
  TouchableOpacity,
  Text,
  View,
  StyleSheet,
  Alert
} from 'react-native';
var FadeInView = require('./src/fadeview');
class MyButton extends Component {
  _onPressButton() {
    Alert.alert('demoproject', 'you have tap the button', {cancelable: true})
  }

  render() {
    return (
      <View style={styles.container}>
        <FadeInView
          style={{
          width: 250,
          height: 50,
          backgroundColor: 'powderblue',
          alignItems: 'center',
          justifyContent: 'center'
        }}>
          <Text
            style={{
            fontSize: 28,
            textAlign: 'center',
            margin: 10
          }}>Fading in</Text>
        </FadeInView>
      </View>

    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

// 注册应用(registerComponent)后才能正确渲染 注意:只把应用作为一个整体注册一次,而不是每个组件/模块都注册
AppRegistry.registerComponent('DemoProject', () => MyButton);