web-dev-qa-db-fra.com

React Violation d'invariant natif: Voir la configuration

J'essaie de pratiquer avec différents écrans sur un projet natif React. Voici mon code du fichier App.js.

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
    static navigationOptions = {
        title: "welcome",
    };
    render() {
        return <Text style={{ color: 'black '}}>Hello, Navigation!</Text>;
    }
}

const navigation = StackNavigator({
    Home: { screen: HomeScreen },

});

export default class App extends Component<{}> {
  render() {
    return <navigation/>;
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
});

Lorsque je lance react-native run-Android, je reçois une violation invariante qui me dit "d'afficher la configuration introuvable ou la navigation par nom". Et puis tous les sites où cette violation se produit. Aide s'il vous plaît merci.

javascriptandroidreact-native
41
Quim Baget

Le nom de tout composant doit être en majuscule. En votre nom, le composant "navigation" n'est pas en majuscule. Ce devrait être "Navigation".

128
Kevin mei

Dans react native native, le nom du composant doit commencer par une lettre majuscule, il sera donc:

const Navigation = StackNavigator({
    Home: { screen: HomeScreen },

});

et appelez-le avec capital:

export default class App extends Component<{}> {
  render() {
    return <Navigation/>;
  }
}
1
Keivan