6

我目前正在使用 React Native 和新的 React Navigation。在那里，我正在尝试遵循嵌套导航器的教程，但总是出现错误：

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);

也许你可以在那里帮助我。我在这里问了同样的问题，但也许这是这个问题的更好地方。

提前致谢！

4

1 回答 1

6

我刚开始的时候也犯了这个错误...

放在MainScreenNavigator上面ReactNativeTest。

正如您目前拥有的那样，调用 MainScreenNavigator 时它不存在。 

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

const ReactNativeTest = StackNavigator({
    Home: { screen: MainScreenNavigator },
    Chat: { screen: ChatScreen },
});
于 2017-03-04T19:25:01.287 回答