使用反应导航器嵌套导航器 - '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 }, 
});