使用React Native进行动画转换无法正常工作

问题描述：

我正在玩反应Native并且我对转换动画有问题。使用React Native进行动画转换无法正常工作

Windows 10 - Hyper V，可视化代码模拟器Android - Ignite Boilerplate。

我想要做的事：

当我点击，我要显示带有刻度动画2上的点击位置的圆0。

我有什么：

见下图（我已经把setTimout看到的第一帧）。在第一次点击时，该组件以其自然宽度和高度非常快速地第一次显示，但0,001上的缩放无效。之后，动画从0,001级开始到2.

与其他点击一样，该圆圈以前一圈的尺寸开始第一帧。然后，动画开始。但再一次，规模：0在第一帧没有影响。

这里是午餐屏幕代码：

export default class LaunchScreen extends Component { 
    state = { 
    clicks: [] 
    }; 
    handlePress(evt) { 
    console.log(evt.nativeEvent.locationX, evt.nativeEvent.locationY) 
    let xCoord = evt.nativeEvent.locationX; 
    let yCoord = evt.nativeEvent.locationY; 
    this 
     .state 
     .clicks 
     .push({x: xCoord, y: yCoord}); 
    this.setState({clicks: this.state.clicks}); 
    } 
    renderClick() { 
    if (this.state.clicks.length > 0) { 
     return this 
     .state 
     .clicks 
     .map((item, i) =>< ClickAnimation key = { 
      item.x 
     } 
     x = { 
      item.x 
     } 
     y = { 
      item.y 
     } />) 
    } else { 
     return <View/> 
    } 

    } 

    render() { 
    return (
     <View style={styles.container}> 
     <ScrollView 
      style={styles.scrollView} 
      horizontal={true} 
      showsHorizontalScrollIndicator={true} 
      contentContainerStyle={styles.scrollView}> 
      <TouchableWithoutFeedback 
      style={styles.touchableWithoutFeedback} 
      onPress= 
      {evt => this.handlePress(evt)}> 
      <View style={styles.scrollView}> 
       {this.renderClick()} 
      </View> 
      </TouchableWithoutFeedback> 
     </ScrollView> 
     </View> 
    ) 
    } 
}

这里圆的成分：

import React from 'react'; 
import PropTypes from 'prop-types'; 
import {Animated, View, Easing} from 'react-native'; 

export default class ClickAnimation extends React.Component { 
    constructor() { 
     super(); 
     console.log(this.state) 
     this.state = { 
      scaleAnim: new Animated.Value(0.001); 
     }; 
    } 
    componentDidMount() { 

     Animated 
      .timing(this.state.scaleAnim, { 
      toValue: 2, 
      duration: 2000 
     }) 
      .start(); 
     .scaleAnim 
    } 
    render() { 
     return (<Animated.View 
      style={{ 
      zIndex: 10, 
      borderColor: "blue", 
      borderRadius: 400, 
      borderWidth: 1, 
      position: "absolute", 
      top: this.props.y, 
      left: this.props.x, 
      width: 60, 
      height: 60, 
      backgroundColor: "red", 
      transform: [ 
       { 
        scaleY: this.state.scaleAnim 
         ? this.state.scaleAnim 
         : 0 
       }, { 
        scaleX: this.state.scaleAnim 
         ? this.state.scaleAnim 
         : 0 
       } 
      ] 
     }}/>); 
    } 
}

你有一个想法，为什么会这样？

答

我找到了解决方案。

这都与这个问题：

https://github.com/facebook/react-native/issues/6278

我看到了它，这就是为什么我写了0.001。但是，0,001仍然很少。用0,01它很好。

所以答案是：

0.01只需更换0.001因为它是太少。

使用React Native进行动画转换无法正常工作

相关推荐