React Native Animated Background Color View

收藏待读

React Native Animated Background Color View

react-native-animated-background-color-view

A modified React Native View component that animates it’s backgroundColor when color prop changes. Works on iOS & Android.

React Native Animated Background Color View

Installation

npm install react-native-animated-background-color-view --save

Usage

Import AnimatedBackgroundColorView component

import { AnimatedBackgroundColorView } from 'react-native-animated-background-color-view';

Use as follows:

Each time the color prop value changes the backgroundColor will use the React Native timing animation to animate from the previous value to the current value.

Animate On Component Mount

You can also specifiy an initial color for the background color to animate from when the component mounts:

On mount the component backgroundColor will be blue and then animate to #00aced .

Using the children Prop

The AnimatedBackgroundColorView component works just like the standard React Native View component. AnimatedBackgroundColorView is designed to be nested inside other View components or other AnimatedBackgroundColorView components and can have 0 to many children of any type.

class AnimatedBackgroundColorViewWithText extends Component {
  render() {
    return (
      
        Hello, world!
      
    );
  }
}

Configuration

You can configure AnimatedBackgroundColorView by passing the following props:

proptype/valid valuesdefaultdescription
colorstring '#00aced' the color value to which the component backgroundColor will animate
delaynumber 0 the length in milliseconds the component will wait before animating to the next color
durationnumber 2400the length in milliseconds the timing animation will last
easing React Native Easing function Easing.out(Easing.exp)the easing function to define animation curve
initialColorstring null the color value from which the component backgroundColor will animate on mount
style React Native ViewPropTypes.style nulladditional styles applied to the component

GitHub

原文 : reactnativeexample

相關閱讀

免责声明:本文内容来源于reactnativeexample,已注明原文出处和链接,文章观点不代表立场,如若侵犯到您的权益,或涉不实谣言,敬请向我们提出检举。