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

根据您所关注的教程（我相信它与我在此处关注的内容相同），您应该有另一个名为＆＃39; app的文件。 JS＆＃39 ;;您在导入行中引用的内容。

app.js＆＃39;的内容：

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：Organizing a React Native Project

Answer 3

将navigationOptions加入

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

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

3 个答案: