使用反應導航器嵌套導航器 - 'Home'應聲明屏幕

Question

我目前正在使用React Native和新的反應導航。在那裏，我正在努力跟隨tutorial for nesting navigators，但總有一個錯誤：

Route 'Home' should declare a screen. For example: 

import MyScreen from './MyScreen'; 
... 
Home: { 
    screen: MyScreen, 
} 

我不知道我在做什麼錯。當我單獨啓動導航器時，他們會工作。但不幸的是沒有合併。

這是App.js，這是我使用教程創建：

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

import { 
    StackNavigator, 
    TabNavigator 
} from 'react-navigation'; 

class HomeScreen extends React.Component { 
    static navigationOptions = { 
     title: 'Welcome', 
    }; 
    render() { 
     const { navigate } = this.props.navigation; 
     return <View> 
      <Text>Hello!</Text> 
      <Button 
       onPress={() => this.props.navigation.navigate('Chat', { user: 'Daniel' })} 
       title="ReactNavigation Test" 
      /> 
     </View>; 
    } 
} 

class ChatScreen extends React.Component { 
    static navigationOptions = { 
     title: 'ReactNavigation Test', 
    }; 
    render() { 
     const { params } = this.props.navigation.state; 
     return (
      <View> 
       <Text>Neue Seite für den Navigator. Hallo {params.user}!</Text> 
      </View> 
     ); 
    } 
} 

class RecentChatsScreen extends React.Component { 
    render() { 
     return <Text>List of recent chats</Text> 
    } 
} 

class AllContactsScreen extends React.Component { 
    render() { 
     return <Text>List of all contacts</Text> 
    } 
} 

const ReactNativeTest = StackNavigator({ 
    Home: { screen: MainScreenNavigator }, 
    Chat: { screen: ChatScreen }, 
}); 

const MainScreenNavigator = TabNavigator({ 
    Recent: { screen: RecentChatsScreen }, 
    All: { screen: AllContactsScreen }, 
}); 

AppRegistry.registerComponent('ReactNativeTest',() => ReactNativeTest); 

也許你能幫助我在那裏。我問了同樣的問題here，但也許這是更好的問題。

在此先感謝！

Answer 1

我犯了這個錯誤，當我開始了，以及...

將MainScreenNavigator以上ReactNativeTest。

正如您目前所擁有的，MainScreenNavigator在調用時不存在。

const MainScreenNavigator = TabNavigator({ 
    Recent: { screen: RecentChatsScreen }, 
    All: { screen: AllContactsScreen }, 
}); 

const ReactNativeTest = StackNavigator({ 
    Home: { screen: MainScreenNavigator }, 
    Chat: { screen: ChatScreen }, 
});