Реагировать на внутреннее инвариантное нарушение: просмотреть конфигурацию

Я пытаюсь попрактиковаться с разными экранами в проекте React Native. Вот мой код из файла 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',
  },
});

Когда я запускаю response-native run-android, я получаю Инвариантное Нарушение, которое говорит мне "просматривать конфигурацию, не найденную или навигацию по имени". И тогда все сайты, где происходит это нарушение. Помогите пожалуйста спасибо.

Ответ 1

Имя любого компонента должно быть капитализировано. На ваше имя компонент "Навигация" не капитализируется. Это должно быть "Навигация".

Ответ 2

В реакции native имя компонента должно начинаться с заглавной буквы, поэтому оно будет:

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

});

и назовите его столицей:

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