React-Navigation:路由应该声明一个屏幕...错误

Question

我是第一次接触react导航，我遵循了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

我也面临着和你一样的问题，here.Well，根据我的解决方案，我所做的就是：

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

就这样。但是，这取决于您使用的机器和系统。我使用的是MacOSsera10.12.6的MacBook pro

而且react-native也是最新的版本，不确定是否有更新的版本(不时有相当多的更新)。

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

祝好运!

Answer 2

如果您的组件或目录有一个index.js，不要忘了在那里添加导出！(我从来没有这样做过……)

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

Answer 3

将navigationOptions放入like

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