[React Native] Animate Styles of a React Native View with Animated.timing
2016-12-18 21:35
141 查看
In this lesson we will use Animated.timing to animate the opacity and height of a View in our React Native application. This function has attributes that you can set such as easing and duration.
import React, {Component} from 'react'; import {Text, View, StyleSheet, Image, Animated, Easing} from 'react-native'; var styles = StyleSheet.create({ container: { backgroundColor: '#48BBEC', paddingBottom: 10 }, name: { alignSelf: 'center', fontSize: 21, marginTop: 10, marginBottom: 5, color: 'white' }, handle: { alignSelf: 'center', fontSize: 16, color: 'white' }, image: { height: 125, width: 125, borderRadius: 65, marginTop: 10, alignSelf: 'center' } }); class Badge extends React.Component { constructor(props){ super(props); this.state = { fadeAnim: new Animated.Value(0), bounceAnim: new Animated.Value(0) } } componentDidMount() { Animated.timing( this.state.fadeAnim, {toValue: 1, duration: 2000} ).start(); Animated.timing( this.state.bounceAnim, {toValue: 1, duration: 2000, easing: Easing.bounce} ).start(); } render(){ const animatedTextStyle = { opacity: this.state.fadeAnim, }; const animateImageStyle = { opacity: this.state.bounceAnim }; return ( <View style={styles.container}> <Animated.Image style={[styles.image, animateImageStyle]} source={{uri: this.props.userInfo.avatar_url}}></Animated.Image> <Animated.Text style={[styles.name,animatedTextStyle]}> {this.props.userInfo.name} </Animated.Text> <Animated.Text style={[styles.handle, animatedTextStyle]}> {this.props.userInfo.login} </Animated.Text> </View> ) } } /** * Make sure when when user the Badge component, the userInfo object is there * @type {{userInfo: *}} */ Badge.propTypes = { userInfo: React.PropTypes.object.isRequired }; module.exports=Badge;
相关文章推荐
- [React Native] Animate the Scale of a React Native Button using Animated.spring
- ReactNative Animated.view的用法
- react native ios添加ART.xcodeproj(ReactNative No component found for view with name “ARTSurfaceView”)
- [React Native] Installing and Linking Modules with Native Code in React Native
- [React Native] Use the SafeAreaView Component in React Native for iPhone X Compatibility
- [React Native]react-native-scrollable-tab-view(进阶篇)
- React Native Trying to resolve view with tag 518 which doesno't
- 引用react-native-scrollable-tab-view 之后Cannot read property 'style' of undefined问题
- [React Native + Firebase] React Native: Real time database with Firebase -- setup & CRUD
- React native 常见错误:unable to resolve module react-native-scrollable-tab-view
- [React Native]react-native-scrollable-tab-view(入门篇)
- [React Native]react-native-scrollable-tab-view(入门篇)
- 解决警告:View.propTypes has been deprecated and will be removed in a future version of ReactNative
- [React Native]react-native-scrollable-tab-view(入门篇)
- ReactNative : ignoring return value of function declared with warn_unused_result attribute
- react native中使用react-native-viewpager实现的商品展示添加点击事件
- react native与webview通信跳转页面报错:Cannot read property 'setNativeProps' of undefiend
- ReactNative的ViewPagerAndroid简述
- react-native —— 在Windows下搭建React Native Android开发环境
- react-native 自定义view向js暴露接口方法