不变违规:查找未找到名称主页的配置

时间:2018-06-02 14:11:41

标签: javascript android reactjs react-native react-navigation

在React Native项目中练习导航时,我遇到了下面截图中显示的错误:

  

不变违规:查找未找到名称主页的配置。这个错误   位于:Home(atSceneView.js:10)

完整的错误详情显示在屏幕截图中:

Screenshot

根据我的阅读,在使用小写命名组件时会出现此类错误,但在我的情况下,它的命名正确。

这是我的Home.js文件代码:

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, Button } from 'react-native';
import firebase from 'firebase';
import Header from './Header';
import LogoutButton from './LogoutButton';
import AlbumList from './AlbumList';
import ALbumDetails from './AlbumDetails';
import LoginForm from './LoginForm';
import { StackNavigator } from 'react-navigation';

export default class Home extends Component {
  static navigationOptions = {
    title: "Strona glowna"
  };

  state = { loggedIn: false };

  goToDetails(){
     this.props.navigation.navigate('ALbumDetails');
  }

  componentWillMount(){
    firebase.initializeApp({
        apiKey: "AIzaSyDsYn7L7qlngJnrYMxDOCp4n7zHJK-jRmw",
        authDomain: "albumsviewer.firebaseapp.com",
        databaseURL: "https://albumsviewer.firebaseio.com",
        projectId: "albumsviewer",
        storageBucket: "albumsviewer.appspot.com",
        messagingSenderId: "897404904381"
      });

      // jezeli sie zaloguje => istnieje obiekt user
      // jezeli sie wyloguje => nie ma obiektu user
    firebase.auth().onAuthStateChanged((user) => {
        if (user){
            this.setState({loggedIn: true});
        }
        else {
            this.setState({loggedIn: false});
        }
    })
}

  renderMainPage(){
    if (this.state.loggedIn){
      return(
        <View>
          <Header headerText="Header Text" />
          <LogoutButton />
          <AlbumList />
        </View>
      );
    }
    else {
      return (
        <LoginForm />
      );
    }
  }

  renderAlbumDetails(){
    /* .. */
  }


  render() {
    return (
      <View style={styles.container}>
        {this.renderMainPage()}
      </View>
    );
  }
}

App.js代码:

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

import { StackNavigator } from 'react-navigation';
import AlbumDetails from './src/components/AlbumDetails';
import Home from './src/components/Home';

const AppNavigation = StackNavigator({
  Home: {
    screen: "Home"
  },
  AlbumDetails: {
    screen: "AlbumDetails"
  }
});

export default AppNavigation;

index.js代码:

import { AppRegistry } from 'react-native';
import AppNavigation from './App';

AppRegistry.registerComponent('albumsViewer', () => AppNavigation);

我很困惑如何解决这个问题。提前谢谢。

0 个答案:

没有答案