com.facebook.react.uimanager.IllegalViewOperationException：尝试添加未知视图标签答案

【问题标题】：com.facebook.react.uimanager.IllegalViewOperationException: Trying to add unknown view tagcom.facebook.react.uimanager.IllegalViewOperationException：尝试添加未知视图标签
【发布时间】：2017-07-10 01:20:57
【问题描述】：

com.facebook.react.uimanager.IllegalViewOperationException：尝试添加未知视图标签：1122

如何解决这个错误，如何找到导致这个崩溃的原因？

【问题讨论】：

标签： react-native-android

【解决方案1】：

这是因为 ReactAndroid/src/main/java/com/facebook/react/ReactInstanceManager.java 中缺少一段代码

reactRootView.removeAllViews();
reactRootView.setId(View.NO_ID);

这已在 RN 0.48.0 中的 c639a1f 中修复

【讨论】：

我在 React Native 0.49.3 中仍然看到这个问题。 10-30 10:57:15.547 8499-8499/? E/AndroidRuntime: FATAL EXCEPTION: main Process: com.app.debug, PID: 8499 com.facebook.react.uimanager.IllegalViewOperationException: Trying to add unknown view tag: 13 detail: View tag:24 children(2): [8,10,],viewsToAdd(1): [[2,13],],
查看这个问题github.com/Microsoft/react-native-code-push/issues/…
在 49.3 上也看到了这个错误
也在 react-native 0.53.3
也在 react-native 0.55.1

【解决方案2】：

在使用 Expo 并在 MapView 上渲染带有文本的视图时，我遇到了同样的错误。

解决它的方法是改变 Text 的样式：

<Text style={styles.textStyle}></Text>

像这样的内联样式：

<Text style={{fontSize: 21}}></Text>

【讨论】：

谢谢！这为我解决了它。当它应该是一个整数时，我有一个带有字符串值（“20pt”）的样式，用于设置文本字段的样式。不知何故，这使得世博会应用程序崩溃。

【解决方案3】：

我设法在react-native 中准确找出导致该问题的原因。

所以在幕后发生的事情是，react-native 正在尝试操纵 shadowNode list，同时其他线程正在操纵它。

特别是 UIImplementation 使用以下方法操作该列表

创建视图
设置儿童
管理孩子
removeRootShadowNode

因此，如果同时调用其中任何一个，应用程序崩溃的可能性非常高。

在我们的应用中，我们通过提供如下所示的自定义 UIImplementation 解决了该问题：

https://github.com/facebook/react-native/pull/20025

如您所见，我们不再允许那些 UIImplementation 方法不同步地运行。

我们可以不断地重现这个问题，但现在已经完全解决了。我们通过这个方法here传递新的UIImplementation。

如果你不知道如何传递一个新的UIImplementationProvider，你必须去你的MainApplication.java文件，找到ReactNativeHost的创建：

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }
...bla bla blah

并添加以下函数：

protected UIImplementationProvider getUIImplementationProvider() {
    return new YourCustomUIImplementationProvider();
}

所以它现在看起来像这样：

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    protected UIImplementationProvider getUIImplementationProvider() {
        return new YourCustomUIImplementationProvider();
    }
...bla bla blah

这是original react-native issue

2021 年编辑：此修复程序是 merged with the official react-native repo。

【讨论】：

在我的情况下，我在未定义的 ActivityIndicator 中传递了 prop [ size='medium' ]，因此出现错误，一旦我通过 size=small，问题就解决了。
@SudoPlz，这个链接，gist.github.com/SudoPlz/23ea2dee9772cb39e1e742034cdf8b98，已经失效了。你还有那个文件吗？我也面临同样的问题。
不再需要我的答案，您不再需要手动执行任何操作，因为我的解决方案已在此处与官方 react-native 代码库合并：github.com/facebook/react-native/pull/20025 现在编辑我的答案。
@SudoPlz 感谢您的修复。必须详尽地找到并解决此问题。但是，在产品构建中，我们仍然偶尔会遇到这个问题。它可能与条件渲染 ala truthy && <Component 有关，其中真值不是真正的布尔值。会这样吗？
@philk 很有可能，永远不要在 react-native 上使用条件渲染，总是使用 truthy ? <Component /> : null} so that you always return null` 而不是 truthy。我保证这会为您省去很多人的麻烦，并且可能还会解决您的崩溃问题。

【解决方案4】：

这个问题可能是由于存在意外的令牌，例如>在错误的位置（iOS仍然可以成功构建！）。

这是我过去经历的一个案例：

<View
  style={styles.container}> # this is causing the issue, should be removed
>
   ... content goes here
</View>

如果你仔细观察你会发现>在style=..之后的存在不应该存在，一旦删除问题就会消失。

【讨论】：