使用LayoutAnimationController.shouldAnimateLayout反应原生Android崩溃

如何解决使用LayoutAnimationController.shouldAnimateLayout反应原生Android崩溃

我的应用在Android设备上的生产模式下崩溃。基本上，这是在Android 10（三星，小米，华为，LGE）上发生的。

Stacktrace

      Fatal Exception: java.lang.NullPointerException: Attempt to invoke virtual method 'android.view.ViewParent android.view.View.getParent()' on a null object reference
       at com.facebook.react.uimanager.layoutanimation.LayoutAnimationController.shouldAnimateLayout (LayoutAnimationController.java:91)
       at com.facebook.react.uimanager.NativeViewHierarchyManager.manageChildren(NativeViewHierarchyManager.java:453)
atcom.facebook.react.uimanager.UIViewOperationQueue$ManageChildrenOperation.execute(UIViewOperationQueue.java:206)
       at com.facebook.react.uimanager.UIViewOperationQueue$1.run(UIViewOperationQueue.java:792)
       at com.facebook.react.uimanager.UIViewOperationQueue.flushPendingBatches(UIViewOperationQueue.java:903)
       at com.facebook.react.uimanager.UIViewOperationQueue.access$2400(UIViewOperationQueue.java:43)
       at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:963)
       at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
       at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:175)
       at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:85)
       at android.view.Choreographer$CallbackRecord.run(Choreographer.java:997)
       at android.view.Choreographer.doCallbacks(Choreographer.java:797)
       at android.view.Choreographer.doFrame(Choreographer.java:728)
       at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:984)
       at android.os.Handler.handleCallback(Handler.java:883)
       at android.os.Handler.dispatchMessage(Handler.java:100)
       at android.os.Looper.loop(Looper.java:237)
       at android.app.ActivityThread.main(ActivityThread.java:8016)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1076)

反应本机版本：

System:
    OS: macOS 10.15.4
    CPU: (4) x64 Intel(R) Core(TM) i5-6267U CPU @ 2.90GHz
    Memory: 405.76 MB / 8.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 13.13.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.7,DriverKit 19.0,macOS 10.15,tvOS 13.4,watchOS 6.2
    Android SDK:
      API Levels: 28,29
      Build Tools: 28.0.3,29.0.0,29.0.2,29.0.3
      System Images: android-22 | Google APIs Intel x86 Atom,android-24 | Google APIs Intel x86 Atom,android-24 | Google Play Intel x86 Atom,android-26 | Google Play Intel x86 Atom,android-29 | Google Play Intel x86 Atom,android-30 | Google APIs Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.0 AI-193.6911.18.40.6514223
    Xcode: 11.7/11E801a - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_242-release - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.0 => 0.62.0 
  npmGlobalPackages:
    *react-native*: Not Found

我的文件带有动画变量：

import { LayoutAnimation,LayoutAnimationConfig } from 'react-native';

export const AnimationVars = {
  layoutAnimation: {
    keyboard,expandCollapse: { ...LayoutAnimation.Presets.easeInEaseOut,duration: expandCollapseDuration } as LayoutAnimationConfig,inputField: { ...LayoutAnimation.Presets.easeInEaseOut,duration: inputFieldDuration } as LayoutAnimationConfig,dialogTransform: { ...LayoutAnimation.Presets.easeInEaseOut,navBarTransform: { ...LayoutAnimation.Presets.easeInEaseOut,duration: navBarDuration } as LayoutAnimationConfig,},};

然后在我的应用的不同位置使用var，例如在toggle方法中的TitleExpanding组件中使用

  private _onToggle(nextValue: boolean,animate: boolean = true) {
    const rotateValue = !nextValue ? 1 : 0;
    if (animate) {
      requestAnimationFrame(() => {
        timing(this._rotateValue,{
          toValue: rotateValue,duration: AnimationVars.expandCollapseDuration,easing: Easing.linear,}).start();
      });
      LayoutAnimation.configureNext(AnimationVars.layoutAnimation.expandCollapse);
    } else {
      this._rotateValue.setValue(rotateValue);
    }
    this._toggle.toggle();

    const preferencesKey = this.props.preferencesKey;
    if (preferencesKey) {
      this._preferences.set(preferencesKey,nextValue ? 'false' : 'true').then();
    }
  }

我认为这是类似的问题https://github.com/facebook/react-native/issues/25832。请让我知道是否有人遇到相同的错误。

解决方法

我遇到了类似的问题，它围绕着我有一个带有触发 LayoutAnimation 的按钮的 Modal。我发现的一种解决方案是将 LayoutAnimation.configureNext 包装在 setImmediate 中，例如

setImmediate(() => LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut));

这样可以让 Modal 在执行操作之前有足够的时间被移除。