web-dev-qa-db-fra.com

React Message d'erreur natif: essayer d'ajouter une vue racine avec un identifiant explicite déjà défini

Je développe actuellement une application avec React Native. La base était Ignite . En ce moment, très souvent lorsque je démarre l'application, j'obtiens un message d'erreur que je Je ne comprends pas. Peut-être que quelqu'un peut me dire ce qu'il dit ou comment résoudre le problème.

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

Je ne sais pas quelles informations sont nécessaires pour m'aider, mais ce sont au moins les dépendances de mon projet (à partir de 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"
},
react-nativereact-navigation
19
Daniel

J'ai remarqué que cela se produit lorsque vous déclarez des variables ou des propriétés après avoir exporté votre composant. Par exemple, si vous procédez comme suit:

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

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

Vous obtenez l'erreur Trying to add a root view with an explicit id already set.

Pour résoudre ce problème, déplacez vos déclarations de variables vers le haut avant d'exporter votre composant. Ou Vous pouvez toujours conserver vos déclarations de variables en bas en modifiant le code ci-dessus pour exporter uniquement le composant à la fin.

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

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

export default SignInLayout;
25
strizzwald

Si vous obtenez quelque chose comme la capture d'écran ci-dessous, essayez de recharger l'application en appuyant sur le bouton de rechargement. J'obtenais cette erreur si j'apportais des modifications au code qui comportaient déjà une exception/erreur.

enter image description here

17
Rahil Ahmad

Secouez le téléphone et vous obtiendrez des options contextuelles, Arrêtez les choses suivantes,

  • Déboguer JS à distance
  • Désactiver le rechargement en direct
  • Désactiver le remodelage à chaud

Après cela, rechargez simplement la page, cela fonctionnera.

0
Sridhar