React Native错误消息：尝试添加已设置显式ID的根视图

Question

我目前正在使用React Native开发一个应用程序。基础是Ignite。目前，我经常在启动应用程序时收到一条我不理解的错误消息。也许有人可以告诉我它说的内容或如何解决问题。

Trying to add a root view with an explicit id already set. React Native uses the id field to track react tags and will overwrite this field. If that is fine, explicitly overwrite the id field to View.NO_ID before calling addRootView.
addRootViewGroup
    NativeViewHierarchyManager.java:504
addRootView
    NativeViewHierarchyManager.java:496
addRootView
    UIViewOperationQueue.java:572
registerRootView
    UIImplementation.java:129
addRootView
    UIManagerModule.java:211
attachRootViewToInstance
    ReactInstanceManager.java:897
setupReactContext
    ReactInstanceManager.java:855
access$1000
    ReactInstanceManager.java:109
run
    ReactInstanceManager.java:821
handleCallback
    Handler.java:739
dispatchMessage
    Handler.java:95
dispatchMessage
    MessageQueueThreadHandler.java:31
loop
    Looper.java:148
run
    MessageQueueThreadImpl.java:194
run
    Thread.java:818

我不确定哪些信息对我有帮助，但这些信息至少是我项目的依赖项（来自package.json）：

"dependencies": {
  "apisauce": "^0.14.0",
  "babel-preset-expo": "^4.0.0",
  "format-json": "^1.0.3",
  "lodash": "^4.17.2",
  "native-base": "^2.3.2",
  "prop-types": "^15.5.10",
  "querystringify": "0.0.4",
  "ramda": "^0.24.1",
  "react": "16.0.0-alpha.12",
  "react-native": "0.48.4",
  "react-native-animatable": "^1.2.4",
  "react-native-config": "^0.6.0",
  "react-native-elements": "^0.17.0",
  "react-native-i18n": "^2.0.6",
  "react-native-responsive-ui": "^1.1.1",
  "react-native-simple-encryption": "^1.2.1",
  "react-native-swiper": "^1.5.13",
  "react-native-vector-icons": "^4.4.0",
  "react-navigation": "^1.0.0-beta.13",
  "react-redux": "^5.0.2",
  "redux": "^3.6.0",
  "redux-persist": "^4.1.0",
  "redux-saga": "^0.15.6",
  "reduxsauce": "0.4.1",
  "seamless-immutable": "^7.0.1"
},
"devDependencies": {
  "@storybook/addon-storyshots": "^3.2.12",
  "@storybook/react-native": "^3.2.12",
  "babel-jest": "21.2.0",
  "babel-plugin-ignite-ignore-reactotron": "^0.3.0",
  "babel-preset-es2015": "^6.18.0",
  "babel-preset-react-native": "3.0.2",
  "enzyme": "^2.6.0",
  "husky": "^0.13.1",
  "ignite-ir-boilerplate": "^2.1.1",
  "jest": "21.2.1",
  "mockery": "^2.0.0",
  "react-addons-test-utils": "~15.4.1",
  "react-dom": "16.0.0-alpha.12",
  "react-test-renderer": "16.0.0-alpha.12",
  "reactotron-react-native": "^1.12.0",
  "reactotron-redux": "^1.11.1",
  "reactotron-redux-saga": "^1.11.1"
},

Answer 1

我注意到在导出组件后声明变量或属性时会发生这种情况。例如，如果您执行以下操作：

export default SignInLayout extends React.Component {
    render() {
        <Header />
        <Content />
        <Footer />
    }
}

const styles = Stylesheet.create({
    red: {
      color: red
    }
});

您收到错误Trying to add a root view with an explicit id already set。

要解决此问题，请在导出组件之前将变量声明向上移动。或者您仍然可以通过将上面的代码更改为仅在末尾导出组件来将变量声明保留在底部。

SignInLayout extends React.Component {
    render() {
        <Header />
        <Content />
        <Footer />
    }
}

const styles = Stylesheet.create({
    red: {
      color: red
    }
});

export default SignInLayout;

Answer 2

如果你得到类似下面的截图，请尝试通过点击重新加载按钮重新加载应用程序。如果我在已经有一些异常/错误的代码中做了一些更改，我就会收到此错误。

Answer 3

摇动手机，您将获得弹出选项，停止以下操作，

• 远程调试JS
• 禁用实时刷新
• 禁用热重排

之后，只需重新加载页面即可。