Réagir avec une violation invariante native: Voir la configuration

Question

J'essaie de pratiquer avec différents écrans sur un projet React Native. 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.

Answer 1

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

Answer 2

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/>;
  }
}