由于发布模式下的动画而导致应用程序崩溃

Question

我在我的应用程序中使用了动画，我根据键盘事件更改高度。它们在调试模式下工作正常，但由于在发布或生产模式构建中应用程序崩溃。

如果我评论动画代码，发布版本工作正常，这向我保证问题是由于动画.我想使用动画，而不删除代码即可解决问题。

这是我正在渲染并在其中使用动画的组件。

customFocusNavigator = () => {
return (
  <Animated.View
    style={[styles.FocusNavigator, { bottom: this.state.keyboardHeight }]}
  >
    <View style={styles.FocusNavigatorDirectionBox}>
      <TouchableOpacity
        onPress={() => {
          this.state.index > 0
            ? this["customtext" + (this.state.index - 1)].changeFocus()
            : this["customtext0"].changeFocus();
        }}
        style={[
          styles.bottomSubView,
          { borderRightColor: constant.COLOR.WHITE, borderRightWidth: 1 }
        ]}
      >
        <Text style={styles.FocusNavigatorText}>Previous</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={() => {
          this.state.index < 4
            ? this["customtext" + (this.state.index + 1)].changeFocus()
            : this["customtext0"].changeFocus();
        }}
        style={styles.bottomSubView}
      >
        <Text style={styles.FocusNavigatorText}>Next</Text>
      </TouchableOpacity>
    </View>
    <TouchableOpacity
      onPress={() => {
        Keyboard.dismiss();
      }}
    >
      <Text style={[styles.FocusNavigatorText, { fontWeight: "bold" }]}>
        Done
      </Text>
    </TouchableOpacity>
  </Animated.View>
);

};

以下是我更改动画的键盘事件。

_keyboardDidShow = e => {
(keyboardHeight = e.endCoordinates.height),
  Animated.timing(this.state.bottomPadding, {
    toValue: 0,
    duration: 150
  }).start();
Animated.timing(this.state.keyboardHeight, {
  toValue: Platform.OS === "ios" ? keyboardHeight : 0,
  duration: 150
}).start();
this.setState({ isFocused: true });
}
_keyboardDidHide = () => {
Animated.timing(this.state.bottomPadding, {
  toValue: 0,
  duration: 150
}).start();
Animated.timing(this.state.keyboardHeight, {
  toValue: 0,
  duration: 0
}).start();
this.setState({ isFocused: false });
}

休息是状态的值：

keyboardHeight: new Animated.Value(0),

我仍然无法找到崩溃的确切原因.任何形式的帮助将不胜感激。谢谢。

Answer 1

嗨，

动画看起来不错，我在直接控制视图高度时遇到了类似的问题，因为它的性能不高。我会改用转换，

您的View样式可能如下所示：

style={[styles.FocusNavigator, { transform: [{ translateY: this.state.keyboardHeight * -1 }]}

如果没有* -1，它将视图向下移动。

如果需要更改视图的高度，可以将 Scale 属性添加到转换中