路由 'Home' 应该为我的一个组件声明一个屏幕”，我不知道为什么

Question

我看到了一些关于这个问题的 post 我尝试了一些解决方案，但似乎 none 有效。我尝试按照错误消息的建议进行操作，但它并没有真正帮助。

在到达此错误之前，我收到了不同的错误消息。我希望他们中的一些人在这个问题解决后会 return。

这里是App.js

import React from 'react';
import { StackNavigator } from "react-navigation";
import { StyleSheet, Text, View } from 'react-native';
import MyScreen from './MyScreen'
import Story from "./src/Screens/Story";
import Headlines from "./src/Screens/HeadlinesScreen";
import storiesStore from "./src/Store/Stories";

export default class App extends React.Component {

  render() {
    return (
      <View style={{ flex: 1 }}>
        <Route />
      </View>
    )
  }
}

export const Route = StackNavigator({
  Home: {
    screen: MyScreen ,
    path: 'home',
    navigationOptions: () => ({
      title: `Home`
    })  
  },
  Story: {
    screen: Story,
    path: 'home/:story',
    navigationOptions: () => ({
      title: `Story`
    })  

  }
});


const styles = StyleSheet.create({
  container: {
    flex: 1
  }
});

这里是MyScreen.js

import React from 'react';
import { StackNavigator } from "react-navigation";
import { StyleSheet, Text, View } from 'react-native';
import { navigationOptions } from "./src/Config/Navigation";

import Headlines from "./src/Screens/HeadlinesScreen";
import storiesStore from "./src/Store/Stories";
import Story from "./src/Screens/Story";

export class MyScreen extends React.Component {
  static navigationOptions = {
    title: "React Native Hacker News",
    ...navigationOptions
  };

  navigateToStory = id => {
    const { navigate } = this.props.navigation;
    navigate("Story", { id });
  };
  render() {
    return (
      <View style={styles.container}>
        <Headlines
          storiesStore={storiesStore}
          navigateToStory={this.navigateToStory}
        />
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {  
    flex: 1
  }
});

这里是Package.json

{
  "name": "hacker-news-0.2",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-native-scripts": "1.6.0",
    "jest-expo": "^22.0.0",
    "react-test-renderer": "16.0.0-beta.5",
    "babel-eslint": "^7.2.0",
    "esformatter": "^0.10.0",
    "esformatter-jsx": "^7.4.1",
    "eslint": "^3.18.0",
    "eslint-plugin-react": "^6.10.3",
    "eslint-plugin-react-native": "^2.3.1"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "node node_modules/jest/bin/jest.js --watch"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "axios": "^0.16.1",
    "expo": "^22.0.0",
    "he": "^1.1.1",
    "mobx": "^3.1.9",
    "mobx-react": "^4.1.8",
    "react": "16.0.0-beta.5",
    "react-native": "^0.48.4",
    "react-native-navbar": "^1.7.1",
    "react-navigation": "^1.0.0-beta.16"
  }
}

错误信息 Click to See the Picture

Answer 1

我猜是因为你没有正确导入你的组件。

在 App.js 尝试：

import {MyScreen} from './MyScreen'

或在MyScreen.js中尝试：

export default class MyScreen extends React.Component {

路由 'Home' 应该为我的一个组件声明一个屏幕”，我不知道为什么

Route 'Home' should declare a screen” occuring for one of my components and i dont know why

reactjs

react-native

react-navigation