React-Navigation：Route应该声明一个屏幕......错误

Question

我是反应导航的新手，我按照site上的步骤操作，但是我收到一条错误，说“路线'聊天'应该声明一个屏幕......下面是我的代码供参考。

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

Answer 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也是最新版本，不确定是否有更新的版本（不时有相当多的更新）。

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

祝好运！

Answer 2

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

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

Answer 3

把navigationOptions放进去

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