反应 - 行动:路由应声明屏幕..错误

Question

我是React-Navigation的新手，我遵循了网站上的步骤，但是我遇到了一个错误，说路由'聊天'应该声明屏幕...以下是我的代码供参考。

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

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

，反应本身也是最新版本，不确定是否有更多的版本(不时有很多更新(。

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

祝你好运！

Answer 2

如果您的组件或目录有index.js，请不要忘记在此处添加导出！(不是我曾经这样做....(

关于组织项目的一篇好文章是index.js的使用：在媒体上组织一个反应本机项目

Answer 3

将 navigationOptions放入

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