React Собственное сообщение об ошибке: попытка добавления корневого представления с уже установленным явным идентификатором

В настоящее время я разрабатываю приложение с React Native. Основой был Игнит. На данный момент очень часто при запуске приложения появляется сообщение об ошибке, которое я не понимаю. Может быть, кто-то может рассказать мне о том, что он говорит, или как решить проблему.

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"
},

Ответ 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;

Ответ 2

Если вы получаете что-то вроде скриншота ниже, попробуйте перезагрузить приложение, нажав кнопку перезагрузки. Я получал эту ошибку, если внес некоторые изменения в код, который уже имел некоторые исключения/ошибки.

Ответ 3

Я не знаю точно, в чем проблема. Но вы должны открыть отладчик после того, как закроете отладчик во время работы приложения.

Ответ 4

Встряхните телефон, и вы получите всплывающие окна, остановите следующие вещи,

Отладка JS Удаленно
Отключить живую перезагрузку
Отключить горячее переопределение

После этого просто перезагрузите страницу, она будет работать.