反应原生：android.view.WindowManager$BadTokenException

Question

我有一个错误，我不知道从哪里开始。尝试更新 react-native 版本 - 但它没有成功..

环境

react-native-cli: 2.0.1
react-native: 0.54.2

生产构建

该应用程序已构建并发布到 google play 商店。所以它是编译的生产版本。认为这可能是模块的问题.. 但不太确定..

这是我在主要组件中的导入

import React, { Component } from 'react'
import { View, Modal, Text, TextInput, StyleSheet } from 'react-native'
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'

全栈

java.lang.RuntimeException: 

  at com.facebook.react.bridge.ReactContext.handleException (ReactContext.java:313)

  at com.facebook.react.bridge.GuardedRunnable.run (GuardedRunnable.java:23)

  at android.os.Handler.handleCallback (Handler.java:739)

  at android.os.Handler.dispatchMessage (Handler.java:95)

  at android.os.Looper.loop (Looper.java:158)

  at android.app.ActivityThread.main (ActivityThread.java:7225)

  at java.lang.reflect.Method.invoke (Native Method)

  at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run (ZygoteInit.java:1230)

  at com.android.internal.os.ZygoteInit.main (ZygoteInit.java:1120)
Caused by: android.view.WindowManager$BadTokenException: 

  at android.view.ViewRootImpl.setView (ViewRootImpl.java:849)

  at android.view.WindowManagerGlobal.addView (WindowManagerGlobal.java:337)

  at android.view.WindowManagerImpl.addView (WindowManagerImpl.java:91)

  at android.app.Dialog.show (Dialog.java:350)

  at com.facebook.react.views.modal.ReactModalHostView.showOrUpdate (ReactModalHostView.java:256)

  at com.facebook.react.views.modal.ReactModalHostManager.onAfterUpdateTransaction (ReactModalHostManager.java:107)

  at com.facebook.react.views.modal.ReactModalHostManager.onAfterUpdateTransaction (ReactModalHostManager.java:28)

  at com.facebook.react.uimanager.ViewManager.updateProperties (ViewManager.java:35)

  at com.facebook.react.uimanager.NativeViewHierarchyManager.createView (NativeViewHierarchyManager.java:233)

  at com.facebook.react.uimanager.UIViewOperationQueue$CreateViewOperation.execute (UIViewOperationQueue.java:153)

  at com.facebook.react.uimanager.UIViewOperationQueue$1.run (UIViewOperationQueue.java:816)

  at com.facebook.react.uimanager.UIViewOperationQueue.flushPendingBatches (UIViewOperationQueue.java:929)

  at com.facebook.react.uimanager.UIViewOperationQueue.access$2100 (UIViewOperationQueue.java:47)

  at com.facebook.react.uimanager.UIViewOperationQueue$2.runGuarded (UIViewOperationQueue.java:887)

  at com.facebook.react.bridge.GuardedRunnable.run (GuardedRunnable.java:21)

更新

我在 3 个不同的地方使用模态。

const Credits = ({ display, toggle }) => (
  <View>
    <TouchableOpacity
      style={[styles.button, styles.info]}
      onPress={() => toggle()}
    >
      <Icon name="question" size={30} color="#000" />
    </TouchableOpacity>

    {display && (
      <Modal
        animationType="slide"
        transparent={true}
        onRequestClose={() => toggle()}
      >
        <View style={styles.card}>
          <ScrollView>
            { ... code ...  }
          </ScrollView>
          <TouchableOpacity
            style={[styles.button, styles.close]}
            onPress={() => toggle()}
          >
            <Icon name="close" size={30} color="#000" />
          </TouchableOpacity>
        </View>
      </Modal>
    )}
  </View>
)

不知道是不是因为我使用{ display && <Modal .../> }逻辑而不是使用道具visible={display}???

任何帮助将不胜感激！

Answer 1

因为 React Native 是异步工作的；在从 React native 获取结果之后，在更新任何 UI 之前，检查 activity.isFinishing() 并且如果活动正在完成，请不要更改 UI

另一种解决方案是将活动状态保存在 onResume() 和 onPause() 中的某个实例变量中，然后在从 React 获取结果时检查活动状态，如果活动恢复，则只显示结果，但如果您的活动已暂停，则保存结果React 的某处，并在活动的 onResume() 方法中显示结果。 此外，不要忘记检查上述生命周期，以向用户显示 React 的任何错误。任何来自 react 的 Android UI 更新都应考虑 Android Activity 生命周期。

void onResume(){
    super.onResume();
    activityResumed = true;
    if(showResultsOnResume){
        showResultsOnResume = false;
       //you have saved results from react waiting to show, show it here
     }
}
void onPause(){
       super.onPause();
       activityResumed = false;
}

// use this method to update any UI from React
void onReactResult(/*Results or Errors from React*/){ 
       if(activityResumed){
           // show the result
       }else{
           showResultsOnResume = true;
           // save result
       }
}