React-Navigation：路线应该声明一个屏幕......错误答案

【问题标题】：React-Navigation: Route should declare a screen... errorReact-Navigation：路线应该声明一个屏幕......错误
【发布时间】：2017-06-02 10:43:09
【问题描述】：

我是 react-navigation 的新手，我按照site 上的步骤操作，但是我收到一条错误消息，提示 Route 'Chat' 应该声明一个屏幕... 下面是我的代码供参考。

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

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

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

这是我认为发生错误的地方

const navigationApp = StackNavigator({
  Home: { screen: HomeScreen },
  Chat: { screen: ChatScreen },
});

class ChatScreen extends React.Component {
  static navigationOptions = {
    title: 'Chat with Lucy',
  };
  render() {
    return (
      <View>
        <Text>Chat with Lucy</Text>
      </View>
    );
  }
}

【问题讨论】：

你能测试一下在navigationApp上面声明ChatScreen吗..
@NeelGala 谢谢，确实有效。

标签： react-native react-navigation

【解决方案1】：

我在这里也面临与您相同的问题。好吧，根据我的解决方案，我所做的是我把这条线：

 const navigationApp = StackNavigator({
  Home: { screen: HomeScreen },
  Chat: { screen: ChatScreen },
});

在顶部，就在 AppRegistry... 行的上方。它应该在index.android.js 文件中。

别忘了在这个文件的顶部也包含这一行：

import { ChatScreen } from './App';

根据您所遵循的教程（我相信它与我在此处所遵循的相同），您应该有另一个名为“app.js”的文件；您在导入行中引用的内容。

“app.js”的内容：

import React from 'react';
import { View, Text } from 'react-native';
export class ChatScreen extends React.Component {
  static navigationOptions = {
    title: 'Chat with Lucy',
  };
  render() {
    return (
      <View>
        <Text>Chat with Lucy</Text>
      </View>
    );
  }
}

就是这样。但是，这取决于您使用的机器和系统。我正在使用带有 Mac OS Sierra 10.12.6 的 MacBook Pro

而且react-native也是最新版本，不知道有没有更新的版本（时不时更新不少）。

尝试修改适合您的版本的行/命令，并仔细阅读示例/教程。由于某些更新/不同的系统环境，可能会有一些已弃用的功能/不可用的代码等。

祝你好运！

【讨论】：

【解决方案2】：

如果您的组件或目录有 index.js，请不要忘记在其中添加导出！（并不是说我曾经这样做过......）

一篇关于组织项目的好文章是和 index.js 的使用：Medium 上的Organizing a React Native Project

【讨论】：

【解决方案3】：

把navigationOptions点赞

{screen: ScreenComponent, navigationOptions: ...your options }

【讨论】：