动画期间在设备上反应原生 android 崩溃

Question

在 Android 5.1 的物理设备上运行 RN v0.40.0。我正在尝试为文本设置动画以淡入显示并以下列方式向上滑动：

export default class Example extends PureComponent {
  constructor(props) {
    super(props);

    this.translate = new Animated.Value(-15);
    this.fade = new Animated.Value(0);
  }

  componentWillReceiveProps() {
    setTimeout(() => {
      Animated.timing(this.translate, {
        toValue: 0,
        duration: 800,
        easing: Easing.inOut(Easing.ease),
      }).start();
      Animated.timing(this.fade, {
          toValue: 1,
          duration: 800,
        easing: Easing.inOut(Easing.ease),
        }
      ).start();
    }, 150);
  }

  render() {
    return (
      <View>
        <Animated.View
          style={{
            transform: [
              {translateY: this.translate},
            ],
            opacity: this.fade
          }}
        >
            <Text>
              {this.props.text}
            </Text>
          </Animated.View>
        </View>
  );
}

在我从开发菜单重新加载 JS 包并转到该视图后，应用程序崩溃且没有错误日志，有时显示 Application ... stopped working，有时不显示。如果我再次从 android 菜单启动应用程序，它会正常加载，仅第一次崩溃。这肯定与动画有关，因为在我介绍动画之前我没有崩溃。没有日志，没有线索，请给我一些建议，这可能是什么，我应该尝试什么以及我应该检查什么。谢谢。

顺便说一句，在那个带有动画的视图上，我有一个非常重的背景图像（~400k），这可能是个问题吗？

UPD：我已将其范围缩小到当我尝试使用setTimeout 或Animation.parallel 并行运行动画时它会崩溃。可能是什么问题？

Answer 1

不确定导致崩溃的原因，但使用 Animated.parallel 对我有用：

        Animated.parallel([
        Animated.spring(
            this.state.pan, {
                ...SPRING_CONFIG,
                overshootClamping: true,
                easing: Easing.linear,
                toValue: {x: direction, y: -200}
            }),
        Animated.timing(
            this.state.fadeAnim, {
                toValue: 1,
                easing: Easing.linear,
                duration: 750,
            }),
       ]).start();

SPRING_CONFIG 类似于

var SPRING_CONFIG = {bounciness: 0, speed: .5};//{tension: 2, friction: 3, velocity: 3};

并且 pan 和 fadeAnim 值在构造函数 this.state 中设置为：

        pan: new Animated.ValueXY(),
        fadeAnim: new Animated.Value(0),

动画视图为

<Animated.View style={this.getStyle()}>
    <Text style={[styles.text, {color: this.state.textColor}]}>{this.state.theText}</Text>
</Animated.View>

getStyle 函数是

    getStyle() {
     return [
          game_styles.word_container,
          {opacity: this.state.fadeAnim},
          {transform: this.state.pan.getTranslateTransform()}
        ];
     }

This tutorial 帮我设置了这个...祝你好运！