肮脏的动画反应原生

时间:2017-06-22 19:00:49

标签: react-native react-native-android

我正在尝试用反应原生的Animated API为视图制作动画。在ios上没问题,但我无法在Android上获得漂亮的动画。

关于ios:

ios

在android:

enter image description here

正如你所看到的,我收到了关于android的扫视。 我错过了什么吗?

这是我的组件:

  import React, { Component } from 'react'
  import { Animated, View } from 'react-native'

  class Badge extends Component {
    constructor(props) {
      super(props)
      this.state = {
        scale: new Animated.Value(0)
      }
    }

    componentWillMount(nextProps) {
      Animated.sequence([
        Animated.timing(
          this.state.scale,
          {
            toValue: 1.3,
            duration: 200,
            useNativeDriver: true
          }
        ),
        Animated.timing(
          this.state.scale,
          {
            toValue: 1,
            duration: 400,
            useNativeDriver: true
          }
        )
      ]).start()
    }

    render() {
      const { container, text } = styles
      const containerAnimated = {...container, transform: [{scale: this.state.scale}]}

      return (
        <Animated.View style={containerAnimated}></Animated.View>
      )
    }

  }

  const styles = {
    container: {
      position: 'absolute',
      height: 50,
      width: 50,
      backgroundColor: 'pink'
    }
  }

  class App extends Component {

    render() {
      return (
        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
          <Badge />
        </View>
      )
    }

  }


  export default App

非常感谢!

0 个答案:

没有答案